/* The session screen: the shell, its three states, the sessions rail and the * refine dock. Split out of style.css, which every page loads — none of this * applies anywhere but the studio. * * Loaded by index.html only. */ /* ------------------------------------------------------- studio shell --- * * The session screen is a state machine driven by one class on : * state-compose, state-busy, state-results. Toggling elements individually is * how the loader ended up on screen from first paint, so each state names * exactly what it shows and everything else stays off. */ .shell { display: grid; grid-template-columns: var(--rail-w, 244px) 1fr; align-items: start; } .rail-collapsed .shell { --rail-w: 52px; } .stage { min-width: 0; padding: 24px 20px 20px; } /* Composing and generating are single-object screens: one thing, centered, nothing competing with it. */ .state-compose .stage, .state-busy .stage { display: grid; justify-items: center; align-content: start; padding-top: min(7vh, 64px); } /* Exactly one thing is on screen per state, stated positively for each. The loader is hidden by DEFAULT and shown only while busy — it used to carry a `hidden` attribute as well, and two mechanisms for one property is precisely how it once sat on screen from first paint. */ #status { display: none; } .state-busy #status { display: flex; } .state-compose #batches, .state-busy #batches { display: none; } .state-busy .compose { display: none; } .state-results .compose { display: none; } .compose { width: 100%; max-width: 560px; } /* Reopened over the results: the SAME form, floated — never a second copy, because two copies means two sets of values and one of them is wrong. Declared after the state rules above so it wins at equal specificity. */ .brief-open .compose { display: block; position: fixed; inset: 57px 0 0; z-index: 30; max-width: none; /* the backdrop covers the screen, not a column */ overflow-y: auto; padding: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); } .brief-open .compose .panel { max-width: 560px; margin: 0 auto; } .compose .panel { position: relative; } .compose-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 18px; border-radius: 50%; } /* Results are centered too — the marks are the point of the screen. */ .state-results .stage { max-width: 1280px; margin: 0 auto; width: 100%; } /* Room for the dock, so the last row is never trapped under it. */ .state-results #batches { padding-bottom: 210px; } .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } /* ------------------------------------------------------- sessions rail --- */ .rail { position: sticky; top: 57px; height: calc(100vh - 57px); display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-elev); overflow: hidden; } .rail-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); } .rail-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-muted); flex: 1; } .rail-toggle { background: none; border: 0; color: var(--fg-muted); cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 6px; } .rail-toggle:hover { color: var(--fg); background: var(--bg-alt); } .rail-list { overflow-y: auto; padding: 6px; flex: 1; } .rail-empty { padding: 0 12px; font-size: 12px; } .rail-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; } .rail-item:hover { background: var(--bg-alt); } .rail-item.on { background: var(--bg-alt); border-color: var(--accent); } .rail-cover img, .rail-blank { width: 34px; height: 34px; border-radius: 7px; display: block; object-fit: contain; background: #fff; } .rail-blank { background: var(--bg-code); } .rail-meta { min-width: 0; } .rail-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-sub { font-size: 11px; color: var(--fg-muted); } .rail-rename { background: none; border: 0; color: var(--fg-muted); cursor: pointer; opacity: 0; padding: 3px 5px; border-radius: 6px; font-size: 12px; } .rail-item:hover .rail-rename { opacity: 1; } .rail-rename:hover { color: var(--accent); background: var(--bg-code); } .rail-edit { width: 100%; margin: 0; padding: 3px 6px; font-size: 13px; border-radius: 6px; } /* Collapsed: an icon strip. The covers stay, because a session is recognised by its mark long before its name. */ .rail-collapsed .rail-label, .rail-collapsed .rail-meta, .rail-collapsed .rail-rename, .rail-collapsed .rail-empty, .rail-collapsed #rail-new { display: none; } .rail-collapsed .rail-item { grid-template-columns: 34px; justify-content: center; padding: 5px; } .rail-collapsed .rail-head { justify-content: center; padding: 10px 4px 8px; } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; max-height: 168px; border-right: 0; border-bottom: 1px solid var(--border); } .rail-list { display: flex; gap: 6px; } .rail-item { grid-template-columns: 34px; } .rail-meta, .rail-rename { display: none; } } /* ---------------------------------------------------------- refine dock --- * * Sticky at the bottom and hidden until a mark is picked. A permanently docked * form would crop the marks for the whole session; this only appears once you * have said which one you are working on. */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--bg-elev); border-top: 1px solid var(--accent); box-shadow: 0 -10px 30px rgb(0 0 0 / .35); animation: dock-in .16s ease-out; } @keyframes dock-in { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .dock { animation: none; } } .dock-inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px 14px; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; } .dock-thumb { width: 76px; height: 76px; object-fit: contain; background: #fff; border-radius: var(--radius); border: 2px solid var(--accent); display: block; } .dock-main { min-width: 0; } .dock-row { display: flex; align-items: center; gap: 8px; } .dock-label { margin: 0; font-size: 12px; color: var(--fg-muted); } .dock-subject { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); margin: 3px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock #instruction { margin: 0 0 8px; min-height: 46px; } /* The modes go horizontal down here — vertical stacking would double the dock's height for no gain. */ .dock .modes { flex-direction: row; gap: 8px; margin: 0; flex-wrap: wrap; } .dock .modes label { padding: 6px 10px; gap: 0 7px; } .dock .modes .why { display: none; } .dock .modes label { grid-template-columns: auto auto; } .dock .err { margin-top: 6px; } @media (max-width: 700px) { .dock-inner { grid-template-columns: 1fr; } .dock-thumb { width: 52px; height: 52px; } } /* ------------------------------------------------------ new session (FAB) --- * * The menu holds it too, but starting a session is the one thing you do from * anywhere in the studio, and burying the primary action two clicks deep was * the cost of collapsing the header into a menu. This buys it back. */ .fab { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow), 0 10px 30px rgb(0 0 0 / .35); font-size: 14px; font-weight: 600; } .fab:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); } .fab .mi { flex: none; } /* The dock owns the bottom of the screen while refining; the button steps above it rather than sitting on top of the Refine action. */ .dock:not([hidden]) ~ .fab { bottom: calc(var(--dock-h, 206px) + 18px); } /* Composing a brand-new session already IS a new session — offering the button there is a no-op that only adds noise. */ .state-compose .fab { display: none; } @media (max-width: 640px) { .fab .fab-label { display: none; } .fab { padding: 13px; } }