/* The chrome every signed-in page wears.
   //
   It was copied into seven pages, each with its own palette written out again — and one of them,
   the dashboard, was dark while the other six were light. Same product, two colour schemes, and a
   name in the navigation that could be changed in six places and missed in the seventh.
   //
   One file now: the colours, the rail, and the column the page's own work sits in. */

/* --- the palette ------------------------------------------------------------------------------
   Light is written out in full here. Dark redefines only the tokens, twice: once for the browser's
   own preference, guarded so that somebody who has explicitly chosen light keeps it, and once for
   an explicit choice of dark. A colour defined only inside one of those blocks is a colour that
   does not exist in the other, which is how a page ends up with one theme's text on the other
   theme's ground. */
:root {
  color-scheme: light;
  --ground: #f6f6f3;
  --panel: #ffffff;
  --rail: #f1f1ed;
  --raise: #fbfbf9;
  --ink: #16160f;
  --body: #4a4a42;
  /* Measured rather than chosen by eye: this is small type, mostly 12 to 13px, and at 4.5:1 it is
     text rather than decoration. It was #86867a, which reads at 3.40 on the ground it sits on. */
  --muted: #717167;
  --line: #e3e3dd;
  --hair: #eeeee8;
  --edge: rgba(22, 22, 15, .08);
  --on-ink: #ffffff;
  --ok: #1baf7a;
  --no: #c0392b;
  --warn: #b8862a;
  /* The three node colours, the same ones every surface that draws a dot uses. */
  --logo: #2a78d6;
  --likeness: #eb6834;
  --merch: #1baf7a;
  --railw: 236px;
  /* How much height the shell's own chrome takes from a page that fills the window: the bar across
     the top of the work, and on a narrow screen the rail lying across the top as well. */
  --chrome: 58px;
  --bar: 58px;
  /* The names the pages were already written in. Aliases rather than a rename across seven files:
     they resolve through the tokens above, so they follow the theme like everything else. */
  --paper: var(--ground);
  --sheet: var(--panel);
  --good: var(--ok);
  --bad: var(--no);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f0f0b;
    --panel: #17170f;
    --rail: #131310;
    --raise: #1e1e15;
    --ink: #f4f4ee;
    --body: #b4b4a6;
    --muted: #868678;   /* 4.08 before, which is under 4.5 for type this size */
    --line: #2b2b20;
    --hair: #22221a;
    --edge: rgba(255, 255, 255, .09);
    --on-ink: #0f0f0b;
    --ok: #35c48f;
    --no: #e0695a;
    --warn: #d2a24a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f0f0b;
  --panel: #17170f;
  --rail: #131310;
  --raise: #1e1e15;
  --ink: #f4f4ee;
  --body: #b4b4a6;
  --muted: #868678;
  --line: #2b2b20;
  --hair: #22221a;
  --edge: rgba(255, 255, 255, .09);
  --on-ink: #0f0f0b;
  --ok: #35c48f;
  --no: #e0695a;
  --warn: #d2a24a;
}

/* --- the frame -------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; }
.hide { display: none !important; }
button, input, select, textarea { font: inherit; }

/* The rail and the work, side by side. The rail does not scroll with the work: moving between
   pages should not move the navigation under the pointer. */
.shell { display: grid; grid-template-columns: var(--railw) minmax(0, 1fr); height: 100%; }
.main { position: relative; min-width: 0; min-height: 0; overflow: auto; }
/* A page whose work fills the window rather than scrolling says so. */
/* A page whose work fills the window rather than scrolling.
   //
   The column is named. Without it the single implicit column is `auto`, which sizes to its widest
   content — so anything inside that did not fit simply made the grid wider than the page instead
   of being made to fit, and took the row heights with it. The bar at the top of the dashboard came
   out five times its own height that way, at any width narrower than a wide laptop.
   //
   And the rows are held to their own size. A grid stretches its auto tracks to fill the container
   by default, so the bar — an auto row with fifty-six pixels in it — was given a third of the
   screen, and the deck underneath it the rest. The last row takes whatever is left; the ones above
   it are as tall as what they hold. */
.main.fills { overflow: hidden; display: grid; align-content: start;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

.rail { display: flex; flex-direction: column; min-height: 0; padding: 18px 14px 14px;
  background: var(--rail); border-right: 1px solid var(--line); }
.rail .mark { display: block; padding: 0 10px 20px; font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.rail select { width: 100%; margin-bottom: 20px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink); font-size: 13px; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail .foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }

.rail a.to, .rail button.to { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--body);
  font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.rail a.to:hover, .rail button.to:hover { background: var(--edge); color: var(--ink); }
.rail a.to.here { background: var(--panel); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--line); }
/* The desk is ours. A rights holder hands over a shoot and gets back a marketplace, and the page
   where a dot is placed is not theirs to see. Hidden by the stylesheet rather than by a class a
   page takes off once the server has answered — which is a link that appears a moment after the
   page does, every time. The answer is on the document before anything is painted. */
.rail .to.ours { display: none; }
:root[data-desk="1"] .rail .to.ours { display: flex; }

.rail .to svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* A number only when there is something behind it; a nought beside a link is clutter, not news. */
.rail .to i { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--ink);
  color: var(--on-ink); font-size: 10.5px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* --- who you are, in the corner of the work --------------------------------------------------- */
/* One bar across the top of the work, on every page.
   //
   The corner used to float over the page, which meant every page had to keep a hole clear for it —
   a width written down, then measured, and still wrong whenever a page put something new in the
   corner. A bar is simpler and it is what the page looked like it had anyway: the controls sit in
   it rather than on top of something, and whatever a page wants at the top left — the dashboard's
   tabs — stands in the same bar at the other end of it.
   //
   Sticky rather than fixed: it is inside the column that scrolls, so it stays at the top of the
   work without being measured against the window. */
.bar { position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  gap: 16px; min-height: 56px; padding: 7px 18px 7px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
/* Whatever the page puts at the left of it, and the room it is allowed to take.
   //
   It gives way first. The bar does not wrap — a bar that wraps is not a bar — so without this the
   dashboard's seven tabs and its six controls simply overflowed the column at anything narrower
   than a wide laptop, and the bar came out five times its own height. The tabs scroll sideways
   inside it instead, which is what they were already built to do. */
/* One line, always.
   //
   It used to take a second line when its contents would not fit on one, which is a bar that
   rearranges itself under somebody who is working — the thing the page is scaled to avoid. The
   page is laid out for a width where all of this fits side by side and shrinks below it, so the
   bar has no decision to make: it is one line at every size.
   //
   Narrower than the scaling can carry, the tabs give way and scroll inside their own box. Some of
   them off the right is a row that is still a row; two rows is a different page. */
.bar > .lead { display: flex; align-items: center; gap: 14px; flex: 0 1 auto; min-width: 0; }
/* And the controls keep their size: they are the things you press. */
.bar > .corner { flex: 0 0 auto; }

.corner { display: flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: 13px; color: var(--muted); }
.corner > .face { position: relative; }

/* One control, however many things stand in that row.
   //
   They were four: the organisation picker was whatever `select` the page happened to style, Sign
   out was whatever `.btn` it styled, the dashboard's own dot was twenty-six pixels square with no
   border, and the profile was the shell's. Four heights, four shapes, one row.
   //
   The shell styles whatever a page puts here rather than each page styling its own — and `.chrome`
   is the same control for something that stands beside the corner rather than in it, like the
   dashboard's range picker. The `:not(.sheet)` is not only to spare the dropdown: it also carries
   this past a page's own `.btn`, which is written later in the document and would otherwise win. */
/* The width is the shell's too. A page may make its own form controls fill their row, and a
   select in this bar that does the same pushes everything after it off the right of the screen —
   which is where the review desk's sign-out and profile went. */
.corner > *:not(.sheet), .chrome {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 34px; width: auto; max-width: 220px; margin: 0; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer; }
.corner > *:not(.sheet):hover, .chrome:hover { border-color: var(--ink); }
/* A control that is not there yet is not a control. Giving everything in this row a display would
   otherwise light up the sign-in button before the page knows whether anybody is signed in. */
.corner > *[hidden] { display: none; }
/* A native select draws its own arrow inside the right-hand padding, so this is the room the
   arrow is given. At nine pixels it sat against the edge of the pill. */
.corner > select, select.chrome { padding-right: 15px; padding-left: 14px; }
.corner select, select.chrome { font-weight: 500; }
/* The address is said once, inside the profile sheet, rather than across the top of every page.
   It stays in the markup because the page's own script writes to it and the sheet reads it. */
.corner #whoText { display: none; }
.corner .face { padding-left: 5px; }
.corner .face b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-size: 11px; }
.sheet { position: absolute; top: calc(100% + 11px); right: 0; z-index: 61; width: 232px; padding: 7px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel);
  box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.sheet p { margin: 6px 10px 8px; font-size: 12px; color: var(--muted); word-break: break-all; }
.sheet button, .sheet a { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 13.5px; text-align: left; text-decoration: none;
  cursor: pointer; }
.sheet button:hover, .sheet a:hover { background: var(--edge); }
.sheet hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--hair); }

/* --- how it looks, which is a setting and not a decoration ------------------------------------- */
.modes { display: flex; gap: 4px; margin: 4px; padding: 3px; border-radius: 10px; background: var(--edge); }
.modes button { flex: 1 1 0; padding: 6px 0; border: 0; border-radius: 7px; background: none;
  color: var(--body); font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; }
.modes button[aria-pressed="true"] { background: var(--panel); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* --- narrower than this is not a size the app is laid out for -----------------------------------
   //
   Below here the page stops being scaled — scaling a layout this far down makes type small rather
   than compact — so the bar has more in it than the width can hold, and holding it to one line put
   the tabs underneath the controls, drawn on top of each other, with half the row off the right of
   the screen.
   //
   This is the one width where wrapping is the right answer rather than the wrong one: above it the
   bar is held on one line because there is room for one line. Here there is not, and the choice is
   between a tidy stack and a pile.
   //
   It is a tidy-up, not a layout for a phone. The app is a desk tool and this is what it does when
   somebody opens it somewhere else. */
@media (max-width: 820px) {
  :root { --chrome: 160px; }
  .bar { min-height: 50px; padding: 8px 12px; flex-wrap: wrap; gap: 8px 10px; }
  /* The controls first, the tabs on a line of their own under them — which is also the order they
     are read in, and it keeps the profile where it is on every other size. */
  .bar > .lead { order: 2; width: 100%; min-width: 0; }
  /* It has to be allowed to give way before it can wrap: held at its own width it simply ran off
     the right of the screen, taking the sign-out and the profile with it. */
  .bar > .corner { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
    row-gap: 8px; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line); }
  .rail .mark { padding: 0 8px 0 0; }
  .rail select { width: auto; max-width: 160px; margin-bottom: 0; }
  .rail nav { flex-direction: row; }
  .rail .foot { margin-top: 0; padding-top: 0; flex-direction: row; }
  .rail .to span { display: none; }
  .rail .to { padding: 8px; }
}