/* The chrome every page of Corkless carries: the sign-in gate, the account menu, and the
   banner that reports what just happened. Paired with corkless-session.js, which drives them.

   Tokens come from the page, the way notice-stage.css takes them - a shared sheet that declared
   its own palette would fight whatever it was dropped into. */

  /* The account, as one control rather than a row of loose buttons. Closed it says who you
     are; open it offers the two things you can do about that. */
  /* Never shrinks and never wraps. It is a fixed-width control at the end of a header whose
     other occupant is text, so when there is not room, the text is what should give. */
  #tenant { position: relative; font-size: 13px; flex: none; }
  .account-trigger { display: flex; align-items: center; gap: 8px; padding: 4px 8px;
                     background: none; border: 1px solid transparent; }
  .account-trigger:hover,
  .account-trigger[aria-expanded="true"] { background: var(--sunken); border-color: var(--line); }
  .account-trigger .chev { color: var(--muted); font-size: 10px; }
  .account-trigger:focus-visible { outline: 3px solid var(--signal, #eeb111); outline-offset: 2px; }

  /* Square, like the console's. A circle is a softer shape than anything else on these pages
     and it was the only one. Two letters is what it is sized for, so anything wider is clipped
     rather than allowed to push the header about. */
  .avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none;
            background: var(--accent); color: var(--accent-ink);
            font-size: 0.68rem; font-weight: 700; line-height: 1; overflow: hidden; }

  /* Flat and square, with the rows divided by their own top borders rather than by a shadow
     and a gap. The console draws it this way and the two sit one click apart. */
  /* Above the banner, which is sticky at 30. Under it, opening the account while something
     was being reported put the banner across your own name - and the menu is the thing just
     asked for, so it is the thing that should be on top. */
  .account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
                  min-width: 15rem; text-align: left; background: var(--surface);
                  border: 1px solid var(--line); }
  .account-who { display: flex; gap: 10px; align-items: flex-start; padding: 12px; }
  .account-who strong { display: block; color: var(--ink); font-size: 0.85rem; }
  /* Scoped to the username and not to every span in the card: .account-who span would outrank
     .avatar and paint the initials muted grey on their own navy ground. */
  .account-who .username { display: block; color: var(--muted); font-size: 0.78rem;
                           overflow-wrap: anywhere; }
  .account-menu button { display: block; width: 100%; text-align: left; background: none;
                         border: 0; border-top: 1px solid var(--line); font: inherit;
                         font-size: 0.84rem; padding: 10px 12px; color: var(--ink); cursor: pointer; }
  .account-menu button:hover { background: var(--sunken); }
  .account-menu button:focus-visible { outline: 3px solid var(--signal, #eeb111); outline-offset: -3px; }

  /* Global, not section-scoped: any author display rule would otherwise beat the UA
     stylesheet's [hidden] and leave an element visible. */
  [hidden] { display: none !important; }

  /* Pinned, because feedback nobody sees is not feedback. The button that causes a notice to
     be posted is halfway down a form, and on a phone the top of the page - where this sits - is
     long out of view by the time somebody presses it. Sticky keeps the answer on screen wherever
     they are when it arrives. */
  .banner { position: sticky; top: 0; z-index: 30;
            border-radius: var(--r1); padding: 10px var(--s3); margin: var(--s4) 0 0;
            display: none; font-size: 14px; }
  .banner[data-kind="error"] { display: block; background: color-mix(in srgb, var(--stop) 12%, var(--surface)); border-left: 3px solid var(--stop); }
  .banner[data-kind="ok"] { display: block; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-left: 3px solid var(--ok); }
  .banner b { display: block; }
  .banner span { color: var(--ink-2); }

  /* The signed-out state. Centred and narrow because it holds one decision and nothing else. */
  .gate { max-width: 34rem; margin: var(--s6) auto; padding: var(--s6); background: var(--surface);
          border: 1px solid var(--line); border-radius: var(--r2); text-align: center; }
  .gate h2 { color: var(--ink); font-size: 18px; text-transform: none; letter-spacing: 0;
             margin: 0 0 var(--s3); }
  .gate p { color: var(--ink-2); margin: 0 0 var(--s5); font-size: 14px; }

  /* Its own, rather than borrowing the host page's button classes: the gate is the one thing
     that must render on a page that has not been written yet. */
  .gate button { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
                 font-weight: 600; border-radius: var(--r1); padding: 9px var(--s4); font-size: 14px;
                 cursor: pointer; }
  .gate button:hover { filter: brightness(1.08); }
  .gate button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

/* The mobile baseline, here rather than on one page, because it is the same on all of them.

   16px is a floor and not a preference: iOS Safari zooms the viewport on any focused control
   smaller than that, which moves the page under the person typing and leaves it scrolled
   sideways afterwards. A page may set its own larger size; it should not set a smaller one. */
input, select, textarea { font-size: 16px; }

/* A finger needs more room than a cursor. Keyed to the pointer rather than the viewport width,
   because a narrow window on a desktop is still driven by a mouse and does not want the console
   loosened - whereas a tablet at 1024px does. 44px is the smallest a thumb reliably hits. */
@media (pointer: coarse) {
  button, [role="button"] { min-height: 44px; }
}