/* ===========================================================================
   THE STAGE IS AT MOST 1920x1080, AND NEVER BIGGER THAN THE WINDOW
   (TASK-1217[Q]).

   Reported from a Meta Quest, in two halves.  First: "the width of
   metaeden.net goes off screen and i need to pan."  Then, once that shipped:
   "the height of the browser frame also goes off screen."  Neither half was
   ever only a headset problem, and the second one was the bigger.

   THE WIDTH.  A 1352px desktop window measured 583px of horizontal overflow on
   this page, which is exactly 1920 minus the viewport, so every window
   narrower than 1920 was already panning.  A 1920x1080 monitor with the
   browser maximised was panning too, by the width of its own scrollbar: the
   frame asked for 1920 and the document had 1905 to give (15px, measured).

   THE HEIGHT, where NO window ever fit.  The stage was a flat 1080 with 44px
   of margin around it, so a 1400x700 window measured 424px of vertical
   overflow, a 1600x800 window 324px, and a MAXIMISED 1920x1080 monitor 44px --
   the frame's own margins, which the 1080 never left room for.  Past 1124 a
   SECOND pin took over that nobody would go looking for: with
   body.browser-framed at min-height:100vh, the frame's 12px top margin
   collapses out of the body and is added to it, so even a 1300px-tall window
   measured 12px.  Every number in this paragraph is 0 now: 19 window heights
   from 200 to 2000 on one page, and all 14 pages this sheet wraps at 1400x700,
   both measured rather than reasoned about.

   WHAT THE 1920 PIN WAS PROTECTING: nothing that survives this change.  Its
   only job was to keep the body at least as wide as a child that was itself a
   flat 1920px, so margin:auto had something to centre inside.  A frame that is
   never wider than its container does not need that prop, so the pin is
   retired rather than overridden.

   The note further down under "THE PINCH-ZOOM HALF" can be misread as a
   defence of the pin.  It is the opposite.  That paragraph is TASK-1173[Q]
   diagnosing the pin as one half of the phone bug it was fixing, and the
   symptom it describes -- the top-left corner of a desktop, and no way to read
   the rest except to zoom out and pan -- is word for word what the Quest
   visitor reported.  1173 read it correctly and scoped the cure to 768px.
   This lifts the same cure to every width, and then to the other axis.

   WHAT GIVES WHEN THE WINDOW IS SHORT.  Something has to: a 700px window
   cannot hold a 1080px stage, and that is not the same question as being
   narrow.  A Quest window is wider than it is tall, so height is the axis
   under MORE pressure, not less.  The answer taken here is the one a real
   browser window gives when you drag its bottom edge up: the chrome keeps
   every authored pixel, and the CONTENT PANE takes the whole difference and
   scrolls inside itself.  .browser-viewport is already overflow:auto at these
   widths -- it is this fiction's own scrollbar, and having one is what the
   1996 window is FOR -- so nothing new starts scrolling.  One thing stops: the
   grey checkerboard desk the window sits on, which is exactly what "goes off
   screen" was describing.  At 1400x700 the pane is 485px and the status bar
   sits at y=666 instead of y=1090 (measured).

   The alternatives are all worse.  Letting the document scroll is the bug
   itself.  Scrolling the frame as a whole would scroll its own title bar away,
   and would hand the desktop the scroll-latching problem TASK-1173[Q] spent a
   whole ticket finding on phones (see the foot of this file).  Scaling is
   ruled out twice over, just below.

   THE 520px PANE FLOOR WENT WITH IT.  .browser-viewport carried
   min-height:520px, which was inert for as long as the frame was a flat 1080
   -- the pane always resolved to 909px, nowhere near it -- and which becomes a
   CLIP the moment the frame tracks the window: the frame is overflow:hidden
   and the status bar is last in that column, so a floor the frame cannot
   afford gets paid for by hiding the status bar.  A floor that can only be
   honoured by overflowing the window is the bug wearing a hat.  Below about a
   215px-tall window the pane runs out anyway and the status bar clips
   (measured at 200); no window is that short, and the document still does not
   scroll there.

   WHY FLUID AND NOT SCALED.  Scaling the whole 1920x1080 stage down with a
   transform would keep the 1996 chrome's proportions, which suits the fiction,
   and it is ruled out twice over.

     Mechanically: metaeden_net_v4_home.test.js J41k9 asserts that no
     .browser-frame / .browser-viewport rule declares transform, filter,
     perspective, contain or will-change, because any one of them makes this
     frame the containing block for its fixed-position descendants.  That traps
     the ME|T|apestry windows and the info-tip inside the frame's two clips,
     and leaves noteTip reading one coordinate space while writing another --
     worse than trapped, because the tip still appears, in the wrong place.
     (The mockup shipped with its own 1920 scaler.  It was deleted, and
     v4_home B1 and B12 still pin its absence.)

     On readability: the smallest chrome text is .browser-tool at 0.76rem,
     measured 12.16px, which clears the project's 12px floor by 0.16px.  Any
     scale factor below 0.987 puts it under the floor, and that is any window
     narrower than about 1895px -- which is to say every window that would need
     scaling at all.  At the Quest's own band it lands near 7.6px.  Reflow
     keeps every authored size exactly as authored, at every window size --
     which is also why the short-window answer above had to be "the pane
     gives", not "the chrome compresses".

   NO BREAKPOINT, deliberately, on either axis.  A max-width:1919px block would
   have missed the maximised-1920 case completely: a media query is evaluated
   against the viewport INCLUDING the scrollbar, so at innerWidth 1920 the
   query reads 1920 and does not match, while the document only has 1905
   (measured).  min() has no such gap and no discontinuity anywhere.  Above
   about 1944 wide the frame is a flat 1920 centred on the checkerboard exactly
   as before, and above 1124 tall it is a flat 1080; below either it tracks the
   window, keeping the same 12px gutter the top margin already uses, which is
   also what stops the 5px drop shadow from becoming 5px of overflow.  The
   idiom is already house style next door in sites/ring-sites.css.

   The height uses 100vh where the width uses 100%, for the plain reason that
   the body has no definite height for a percentage to resolve against.  100vh
   has one gap of its own -- it ignores the height a HORIZONTAL scrollbar would
   take -- and the width rule above is precisely what guarantees there is never
   one to ignore.  The two halves hold each other up; do not relax one without
   re-reading the other.

   vh AND NOT dvh, which is the obvious objection.  dvh tracks a browser UI
   that retracts as you scroll, and the case it exists for is a phone -- which
   the <=768px block owns outright, frame height and all.  On a windowed
   browser dvh and vh are the same number, so all it could add above 768 is the
   frame RESIZING mid-scroll on a tablet whose chrome retracts, which is the
   layout jitter this project rules out elsewhere.  If a headset ever turns out
   to retract its own chrome, the fix is a second `height:` line in dvh
   directly under the vh one, not a swap: an engine that does not know dvh
   drops the line and keeps the vh above it, whereas a swap leaves it with no
   height at all and the frame grows to its content again.

   Phones are still owned by the <=768px block at the foot of this file, where
   the frame stops being a stage altogether.  It overrides all three rules this
   header is about -- the frame's width, the frame's height and the body's
   floor -- and is unaffected by any of them.  Re-measured at 375x812 after the
   height change: the viewport is not a scroll container, the document is the
   only scroller, and there is no horizontal overflow.  That is 1173's contract
   word for word, and it is the thing a careless height rule takes back.
   =========================================================================== */
body.browser-framed {
  min-width: 0;
  /* TASK-1217[Q] round 2: was a flat 100vh, and that alone was 12px of
     vertical overflow on a window TALLER than the whole stage.  The frame's
     12px top margin collapses out of the body and is added to it, so a body
     floor of exactly 100vh puts the document at 100vh + 12 before the frame
     has asked for anything.  The same 44px allowance the frame's own height
     carries below fixes it, and keeps this floor doing its real job: the body
     box still spans the window, between the frame's own two margins.  (Nothing
     visual rides on the last 32px of it either way -- the checkerboard is
     painted on the canvas, which body backgrounds propagate to.) */
  min-height: calc(100vh - 44px);
  background:
    linear-gradient(45deg, #777 25%, transparent 25%),
    linear-gradient(-45deg, #777 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #777 75%),
    linear-gradient(-45deg, transparent 75%, #777 75%),
    #8b8b8b !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
  background-size: 16px 16px !important;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.browser-frame {
  box-sizing: border-box;
  display: flex;
  /* TASK-1217[Q]: was a flat 1920px.  See the header for why this is a width
     and not a transform.  The 24px is the pair of 12px gutters the auto
     margins below resolve to, which is where the drop shadow lives. */
  width: min(1920px, 100% - 24px);
  /* TASK-1217[Q] round 2: was a flat 1080px, which no window ever had room
     for -- 1080 plus the 44px of margin below is 1124, and even a 1920x1080
     monitor maximised is 44px short.  The 44px is the 12px + 32px pair those
     margins resolve to, exactly as the width's 24px is its pair of 12px
     gutters.  100vh and not 100%: the body has no definite height for a
     percentage to resolve against. */
  height: min(1080px, 100vh - 44px);
  flex-direction: column;
  margin: 12px auto 32px;
  border: 2px solid #000000;
  background: #c0c0c0;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.browser-titlebar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 3px 6px;
  /* TASK-1112[Q]: the light stop was #1084d0 and white measured 4.013:1 against
     it, under the 4.5 floor with the CRT wash off entirely.  #0e73b5 is 5.075
     unwashed and 4.827 at the shipped scan intensity, sampled.  This is the
     same value the ME|T|apestry windows carry (metaeden-v4.css, and
     metaeden-v4-membership.css) -- the frame and the windows inside it are one
     title bar wearing one blue, and a seam between them would be visible on
     every page this shell wraps. */
  background: linear-gradient(90deg, #000080, #0e73b5);
  color: #ffffff;
  font: 700 0.9rem Arial, Helvetica, sans-serif;
}

/* TASK-1138[Q]: the C4 mark now sits here instead of a letter "M" (the SVG
   itself is METSCAPE_MARK in browser-frame.js, with the reasoning for inline).
   THE OUTER FOOTPRINT IS UNCHANGED, deliberately: this rule used to be a
   content-box 18px inside a 1px rule, i.e. 20px on the page, and box-sizing
   plus width:20px is that same 20px -- measured, not assumed.  What changes is
   what is inside it: the art gets the full 18px instead of the 16px a
   content-box 18px would have left it, and 18px is the size the mark was
   rasterised at and read back pixel-by-pixel before this shipped (at 16 the
   pixel M muddies).  The 1px white rule stays -- it is what makes this read as
   a Win95 app icon rather than a hole in the title bar.
   background is the mark's own navy (was #003366) so the plate matches the art
   edge-to-edge if the SVG ever paints late.  The colour/font declarations that
   drew the letter are gone with the letter. */
.browser-logo {
  display: grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #ffffff;
  background: #0a1030;
}

.browser-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The METSCAPE wordmark, per the handoff's boxing rule: the shared T in a
   solid patch, the rest of the group in an open-left rectangle flush against
   it.  Sized in em so it tracks whatever it is dropped into; the only caller
   today is the exit dialog's h1.  Light chrome there, so pink patch + navy
   rectangle (the handoff's light pairing).  inline-flex with a shared 1.5em
   box height keeps the patch and the rectangle exactly the same height, and
   the negative letter-spacing reset stops the rectangle inheriting a gap that
   would break the "flush against" join.
   No webfont: Press Start 2P is not loaded on any of the ~20 pages this chrome
   wraps and pulling one in for a farewell dialog would be a real cost for a
   rare surface.  The BOX is the mark; the face stays the page's own. */
/* The mark states its OWN colour and kills any inherited text-shadow.  This is
   load-bearing, not tidiness: the exit dialog's h1 inherits from whichever of
   the ~20 host stylesheets is loaded, so before this the "ME" arrived in that
   site's heading colour (periwinkle with a drop shadow on the almanac, seen
   live) while "SCAPE" was the navy this file gives it -- one wordmark in two
   colours, different on every page. */
.browser-wordmark {
  display: inline-flex;
  align-items: stretch;
  vertical-align: -0.32em;
  color: #101736;
  letter-spacing: 0.06em;
  text-shadow: none;
}

/* TASK-1139[Q]: ME is an element so it can centre itself, exactly as the T and
   the rest already do.  The wordmark above is align-items:stretch, so a bare
   "ME" text node was painted at the top of the stretched line while its two
   boxed neighbours sat centred -- the same bug the user photographed on the
   sign-on window, independently present here.  This copy is gated to desktop
   by the frame's own media query, so it never reached their phone; fixed
   anyway, because a desktop visitor sees the same crooked wordmark. */
.browser-wordmark-me {
  display: inline-flex;
  align-items: center;
  font-weight: inherit;
}

.browser-wordmark-t {
  display: inline-flex;
  min-width: 1.5em;
  align-items: center;
  justify-content: center;
  margin-left: 0.14em;
  background: #ff3da8;
  color: #ffffff;
  font-style: normal;
  letter-spacing: 0;
}

.browser-wordmark-rest {
  display: inline-flex;
  min-height: 1.5em;
  align-items: center;
  padding: 0 0.3em;
  border: 2px solid #101736;
  border-left: 0;
  color: #101736;
  text-decoration: none;
}

.browser-window-buttons {
  display: flex;
  gap: 3px;
}

.browser-window-buttons span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.78rem Arial, Helvetica, sans-serif;
}

.browser-menubar,
.browser-toolbar,
.browser-locationbar,
.browser-statusbar {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #808080;
  color: #000000;
  font: 0.82rem Arial, Helvetica, sans-serif;
}

.browser-menubar {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
}

.browser-menu {
  position: relative;
}

.browser-menu-button {
  border: 0;
  background: transparent;
  color: #000000;
  font: inherit;
  padding: 2px 7px;
}

.browser-menu-button:hover,
.browser-menu.is-open > .browser-menu-button {
  background: #000080;
  color: #ffffff;
}

.browser-menu-panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  display: none;
  min-width: 170px;
  padding: 2px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.browser-bookmarks-panel {
  min-width: 265px;
  max-height: 320px;
  overflow: auto;
}

.browser-menu.is-open > .browser-menu-panel {
  display: block;
}

.browser-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 24px 4px 10px;
  border: 0;
  background: #c0c0c0;
  color: #000000;
  font: 0.82rem Arial, Helvetica, sans-serif;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.browser-menu-item:hover,
.browser-menu-item:focus {
  background: #000080;
  color: #ffffff;
  outline: 0;
}

.browser-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 7px;
}

.browser-tool {
  min-width: 64px;
  min-height: 28px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.76rem Arial, Helvetica, sans-serif;
}

.browser-locationbar {
  display: grid;
  grid-template-columns: auto 1fr 420px auto;
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
}

.browser-address {
  overflow: hidden;
  padding: 3px 6px;
  border: 2px inset #eeeeee;
  background: #ffffff;
  color: #000000;
  font: 0.9rem "Times New Roman", serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.browser-go {
  min-height: 24px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  font-weight: 700;
}

.browser-history {
  min-width: 0;
  height: 25px;
  border: 2px inset #eeeeee;
  background: #ffffff;
  color: #000000;
  font: 0.86rem "Times New Roman", serif;
}

.browser-viewport {
  position: relative;
  flex: 1 1 auto;
  /* TASK-1217[Q] round 2: was 520px.  That floor was inert for as long as the
     frame was a flat 1080 -- the pane resolved to 909px and never went near it
     -- and it turns into a CLIP the moment the frame tracks the window: the
     frame is overflow:hidden and the status bar is last in this column, so a
     floor the frame cannot afford gets paid for by hiding the status bar.  The
     pane is the one thing here that is SUPPOSED to give, so it gives. */
  min-height: 0;
  overflow: auto;
  border: 2px inset #eeeeee;
  background-color: #ffffff;
  color: inherit;
}

.browser-viewport .starfield {
  position: absolute;
}

.browser-viewport > *:first-child {
  margin-top: 0;
}

.browser-exit-screen {
  display: grid;
  place-items: center;
  background: #000000 !important;
  color: #c0c0c0 !important;
}

.browser-exit-message {
  width: 520px;
  padding: 24px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

/* TASK-1138[Q]: colour and shadow now come from the dialog, not from whichever
   site stylesheet happens to be loaded.  .browser-exit-message has always
   declared color:#000000 for this box; the h1 was the one thing escaping it,
   which is how "METScape Has Exited" ended up periwinkle-on-#c0c0c0 (about
   2.5:1, under the 4.5 floor) on the ring sites.  Now it is the box's own
   near-black, and the wordmark beside it keeps its own navy. */
.browser-exit-message h1 {
  margin: 0 0 12px;
  color: inherit;
  font-size: 1.4rem;
  text-shadow: none;
}

.browser-statusbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 7px;
}

/* ===========================================================================
   PHONES: THE 1920x1080 STAGE BECOMES A FLUID PAGE (TASK-1173[Q]).

   THE BUG THIS FIXES, in the user's words: "scrolling just the regular .net
   website pages doesn't work with touch scroll, it freezes while scrolling, i
   have to do weird pinch zoom things to scroll up and down."  Both halves of
   that sentence are the rules at the top of this file, measured on a 375x812
   viewport at /sites/rainy-pier.html:

     THE PINCH-ZOOM HALF.  body.browser-framed is min-width:1920px and
     .browser-frame is a fixed 1920x1080 box, so the document is 1920 CSS px
     wide on a 375px phone.  The visitor gets the top-left corner of a desktop
     and no way to read the rest except to zoom out and pan.

     THE FREEZE HALF.  .browser-viewport is overflow:auto inside that
     fixed-height frame, which makes it a scroll container -- and at 375x812 it
     is the element under nearly every finger.  It measured 1916x909 holding
     1215px of content: ~310px of scroll.  A touch gesture latches to it, runs
     that 310px out, and stops dead with the document's own scroll never
     consulted.  A scroll that starts and then freezes is not a metaphor here;
     it is scroll latching doing exactly what it is specified to do.

   THE FIX IS TO STOP BEING A STAGE, not to add a phone chrome.  The document
   becomes the one and only scroller, the frame sizes to its content, and the
   body stops forcing 1920px.  Native touch scrolling then works anywhere on
   the page because there is nothing left for a gesture to latch to.

   WHY IT LIVES HERE AND NOT IN TWELVE <link media> ATTRIBUTES.  Only
   v4-metaeden.html and v4-game.html gate this sheet at (min-width: 769px), and
   each can afford to because it has a phone chrome of its own to swap in
   (mobile-e, mobile-e-game).  The other twelve pages that load it have no
   replacement, so gating them would strip the frame's CSS while browser-frame
   .js kept building its DOM -- an unstyled File/Edit/View/Go menu and a
   Location bar dumped as plain text above every page.  One media block reaches
   all twelve, and leaves the two gated pages byte-identical: a sheet they do
   not load at this width cannot change them.

   768px IS THE SAME BREAKPOINT those two <link> tags and mobile-e.js's
   MOBILE_QUERY carry.  Keep it in step if that number ever moves.  (The ring
   sites' own content already collapses at 760px in sites/ring-sites.css; they
   were mobile-ready and this stage was the only thing in the way.)

   NO ?v= TOKEN, deliberately rather than by omission: this sheet has never
   carried one on any of the fourteen pages that load it, because metaeden.net
   serves it Cache-Control: public, max-age=0, must-revalidate (checked against
   prod) so its ETag turns over with the file.  Adding one would also mean
   editing v4-game.html, whose <link> is pinned by an exact-string mutation in
   server/metaeden_net_mobile_e_game.test.js.

   TWO EXISTING GUARDS CONSTRAIN WHAT MAY GO IN HERE.  Every selector below is
   .browser-* / body.browser-framed scoped, which metaeden_net_mobile_e.test.js
   A7 asserts of this whole file; and none of them declares transform, filter,
   perspective, contain or will-change, which metaeden_net_v4_home.test.js
   J41k9 asserts of every .browser-frame / .browser-viewport rule -- that is
   what keeps the ME|T|apestry windows' position:fixed out of a containing
   block.  Both still hold with this block added.
   =========================================================================== */
@media (max-width: 768px) {
  /* TASK-1217[Q] retired the 1920px pin from the base rule, so min-width is
     now a no-op rather than an override.  It is kept, not deleted: this block
     has to go on working on its own if the pin is ever restored above.
     min-height is a real override again.  The base floor reserves 44px for the
     frame's margins, and at this width the frame has none (margin:0, just
     below), so those 44px would be 44px of body the page never gets.  Nothing
     scrolls either way -- the checkerboard is painted on the canvas, not the
     body box -- but the floor should mean what it says at every width. */
  body.browser-framed {
    min-width: 0;
    min-height: 100vh;
  }

  /* The frame stops being a stage and becomes the page.  The drop shadow goes
     with it: 5px of shadow on a full-bleed box is 5px of horizontal overflow,
     which is the pinch-to-read prompt back again for no visual gain.  overflow
     must become visible, not stay hidden -- with height:auto there is nothing
     left to clip except the menu panels, which open below the bar. */
  .browser-frame {
    width: auto;
    height: auto;
    margin: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* THE SCROLL FIX.  No fixed frame height means nothing to scroll inside, so
     the viewport hands its scrolling back to the document. */
  .browser-viewport {
    min-height: 0;
    overflow: visible;
  }

  /* The title is the one part of the bar with no width of its own.  Without
     this the 1996 title string sets the grid's minimum and the document is
     wide again by a different route. */
  .browser-titlebar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .browser-titlebar > span:not([class]) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Nine menu names measure about 437px in one row. */
  .browser-menubar {
    flex-wrap: wrap;
  }

  /* The history <select> sat in a 420px track.  It gets a row of its own, with
     Go pinned beside the address so neither row is left half empty. */
  .browser-locationbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .browser-history {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .browser-go {
    grid-row: 1;
    grid-column: 3;
  }

  /* A dropdown is absolutely positioned and no longer clipped by the frame, so
     it now has to keep itself inside the viewport on its own. */
  .browser-menu-panel {
    max-width: calc(100vw - 16px);
  }

  .browser-bookmarks-panel {
    min-width: 0;
  }

  .browser-menu-item {
    white-space: normal;
  }

  /* File > Exit is reachable on every one of these pages, and its dialog was
     authored at a flat 520px.  border-box so the 24px padding is capped too. */
  .browser-exit-message {
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* ===========================================================================
   THE BOSS KEY (2026-08-19 handoff).  .browser-tool-icon is a narrower
   variant of .browser-tool for an icon-only button; the rest is the
   full-viewport cover itself, appended straight to <body> (not into
   .browser-viewport) so its z-index only has to clear the page, not the
   frame's own overflow:hidden.

   TASK-1305[Q]: THAT Z-INDEX WAS 999999 AND IT WAS NOT ENOUGH.  The claim
   here used to be that 999999 "clears every stacking context this chrome and
   its host pages use today (the highest documented is 78)".  The survey
   behind that sentence missed metaeden.css, where an OPEN ARCADE CABINET
   (.meta-arcade-play-cabinet) sits at 1000001 and its backdrop at 1000000.
   So pressing the boss key while playing a game opened the cover and left the
   game painted straight over the top of it -- measured, not inferred:
   elementFromPoint at the centre of the screen returned a Rink of Destruction
   element with the cover open.  That is a total failure of the one promise
   this feature makes, in the exact situation it exists for.

   It is now the maximum 32-bit signed integer, which is the conventional
   "nothing may sit above this" value and cannot be beaten by a page that
   picks a bigger round number later.  This is the one element in the codebase
   entitled to it: everything else is content, and this is the thing that
   hides content.  server/metaeden_net_bosskey.test.js pins it ABOVE every
   z-index any stylesheet in this repo declares, so a future page that invents
   a higher one turns that pin red instead of silently defeating the cover.

   Self-contained on purpose -- an original palette and system font stack,
   not this project's pink/lime/amber/cyan accents and not any real chat
   product's, so it reads as an unrelated, unremarkable work tool. */
.browser-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0 6px;
}

/* TASK-1305[Q]: THE CHROME OUTRANKS THE PAGE, which is how a browser works
   and was not how this one worked.  A page dialog here is position:fixed with
   inset:0 -- the Sign On window (#aolwin, z-index 70 in metaeden-v4.css) is
   the one a visitor meets first -- so its backdrop covered the whole window
   INCLUDING these bars, and every control on them went dead while it was up.
   Measured rather than guessed: elementFromPoint over the boss-key button
   returned #aolwin, not the button.

   Reported as "I can't click the boss key", and the boss key is the sharpest
   case (it exists to be pressed in a hurry, and a modal is not a reason it
   should not work), but nothing about the bug is specific to it -- Back,
   Home and the location bar were equally unreachable.  So the fix is at the
   layer the bug is at: the browser's own furniture sits above the document it
   is displaying, all five bars together, rather than one button being special.

   1000 is chosen to sit above every ordinary page stacking context (the
   highest in the site stylesheets is 300) while staying BELOW the deliberate
   full-screen takeovers at 1000000+ -- an open arcade cabinet is meant to
   cover the frame, and this must not undo that.  The boss key cover clears
   both, being the one thing entitled to sit above everything.

   position:relative is required for z-index to apply and is safe here: none
   of these bars has an absolutely-positioned descendant that would re-anchor
   to it (checked before landing).

   TASK-1306[Q]: THEY DESCEND, and the first cut of this rule gave all five the
   SAME 1000, which broke the menu bar.  Equal z-index falls back to document
   order, so the toolbar and the location bar -- later siblings -- painted over
   the Dial Up dropdown, slicing it into strips with "Connect..." above the
   toolbar and "Load a Card..." below the location bar.  Worse, raising the
   menubar turned it into a stacking context, so .browser-menu-panel's own
   z-index:20 became scoped INSIDE it and could never climb out on its own.
   Descending values put every bar above the ones beneath it, which is the
   order an overflowing dropdown actually needs. */
/* ==========================================================================
   THE Z SCALE (TASK-1380[Q]) -- the whole site, one dimension, named bands.

   Every floating thing on a framed page competes in ONE stacking context
   (the chrome bars are position:relative siblings of .browser-viewport, and
   the fixed windows are DOM-children of the viewport, which creates no
   context of its own -- a J41k9-pinned fact).  So one scale is the truth,
   and this is it:

     -1..299          the PAGE: content detail, floating windows and trays
                      (70..99), page covers, the CRT wash at 200.  Open to
                      new work -- pick the neighbourhood that matches.
     1001..1006       the CHROME: the five bars, descending (TASK-1306), and
                      the fullscreen game frame at 1006 that deliberately
                      covers them (TASK-1364).  Closed: only the frame and
                      the play surface may add here.
     1000000..1000003 the COVERS: arcade cabinet, the door, its toast.
     2147483000       the audio-unlock veil, above every cover.
     2147483647       the boss key, above absolutely everything.

   Everything BETWEEN the bands (300..999, 1007..999999, and so on) is
   CLOSED.  The values already living there -- cartridge-internal layers
   trapped inside their own stacking contexts, mostly -- are grandfathered by
   name in server/fixtures/net-z-ledger.json, and
   server/metaeden_net_z_bands.test.js goes red the day a NEW literal lands
   outside an open band, which is what makes this a law rather than a wish.
   Retire a grandfathered value and its ledger row goes with it.
   ========================================================================== */
.browser-titlebar   { position: relative; z-index: 1005; }
.browser-menubar    { position: relative; z-index: 1004; }
.browser-toolbar    { position: relative; z-index: 1003; }
.browser-locationbar{ position: relative; z-index: 1002; }
/* TASK-1380[Q]: the statusbar PAINTS over whatever drifts into its strip --
   that is the chrome winning, and correct -- but it is aria-hidden decoration
   with no interactive child, and it was also EATING THE CLICKS meant for
   controls underneath ("Document: Done" sitting on the minimized-chat chips
   was the reported case). Decoration may cover; it may not intercept. */
.browser-statusbar  { position: relative; z-index: 1001; pointer-events: none; }

.met-bosskey-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1d1d1f;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.bk-body{flex:1 1 auto;display:flex;min-height:0}
.bk-banner{display:flex;align-items:center;gap:10px;padding:5px 12px;background:#0d1b16;color:#c9d6d1}
.bk-brand{display:none;align-items:center;gap:8px;font:700 15px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-brandmark{width:20px;height:20px;border-radius:6px;background:#1a6ef0}
.bk-bannernav{display:flex;gap:2px}
.bk-bannernav button,.bk-bannerright button{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#9db3aa;font-size:14px;line-height:1;cursor:pointer}
.bk-bannernav button:hover,.bk-bannerright button:hover{background:rgba(255,255,255,.1)}
.bk-bannersearch{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.met-bosskey-cover .bk-bannersearch input[type="search"]{width:min(640px,100%);box-sizing:border-box;padding:5px 12px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(255,255,255,.12);color:#e6ede9;font:500 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-bannersearch input[type="search"]::placeholder{color:#9db3aa}
.bk-rail{flex:0 0 56px;width:56px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 4px;background:#0d1b16;color:#c9d6d1}
.bk-railws{width:34px;height:34px;border:0;border-radius:9px;background:#1f3d34;color:#fff;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-railitem{display:flex;flex-direction:column;align-items:center;gap:3px;width:48px;padding:5px 0;border:0;border-radius:8px;background:transparent;color:#9db3aa;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-railitem i{font-style:normal;font-size:15px;line-height:1}
.bk-railitem:hover{background:rgba(255,255,255,.08)}
.bk-railitem.is-active{color:#ffffff}
.bk-railitem.is-active i{background:rgba(255,255,255,.16);border-radius:7px;padding:3px 9px}
.bk-railspacer{flex:1 1 auto}
.bk-railplus{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#e6ede9;font:700 16px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-railavatar{width:32px;height:32px;border-radius:8px;background:#3b6ea5;color:#fff;display:grid;place-items:center;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-navadd{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:6px;background:transparent;color:#8ba39a;font:500 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:left;cursor:pointer}
.bk-navadd:hover{background:rgba(255,255,255,.08)}
.bk-star{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#5c5c60;font-size:15px;line-height:1;cursor:pointer}
.bk-star:hover{background:#f1f1f4}
.bk-topbtns{flex:0 0 auto;display:flex;gap:6px}
.bk-topbtns button{padding:4px 11px;border:1px solid #d8d8dc;border-radius:7px;background:#fff;color:#3c3c40;font:600 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-topbtns button:hover{background:#f4f4f6}
.bk-tabs{display:flex;gap:16px;padding:0 20px;border-bottom:1px solid #e5e5e8}
.bk-tabs button{padding:8px 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:#5c5c60;font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-tabs button.is-active{color:#1d1d1f;border-bottom-color:#1d1d1f}
.bk-day{display:flex;justify-content:center;align-items:center;position:relative;margin:2px 0}
.bk-day::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e5e5e8}
.bk-day span{position:relative;padding:3px 12px;border:1px solid #e5e5e8;border-radius:14px;background:#fff;color:#5c5c60;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-comptop{display:flex;align-items:center;gap:2px;padding:6px 8px 0}
.bk-comptop button{min-width:24px;height:22px;padding:0 5px;border:0;border-radius:5px;background:transparent;color:#5c5c60;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1;cursor:pointer}
.bk-comptop button:hover{background:#f1f1f4}
.bk-compsep{width:1px;height:14px;margin:0 4px;background:#e2e2e6}
.bk-compbottom{display:flex;align-items:center;padding:0 6px 6px}
.bk-compbottom .bk-comptools{padding:0}

.bk-sidebar {
  flex: 0 0 248px;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: #152a24;
  color: #c9d6d1;
  overflow-y: auto;
}

.bk-wsrow{position:relative;display:flex;align-items:center;gap:8px;padding:2px 4px 10px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.bk-wsmeta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.bk-wsuser{display:flex;align-items:center;gap:5px;font-size:12px;color:#8ba39a}
.bk-wsuser::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ba55d}
.bk-kebab{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#c9d6d1;font-size:14px;line-height:1;cursor:pointer}
.bk-kebab:hover{background:rgba(255,255,255,.1)}
.bk-menu{position:absolute;top:100%;right:0;z-index:3;display:none;min-width:172px;padding:6px;border-radius:10px;background:#ffffff;box-shadow:0 10px 30px rgba(0,0,0,.34)}
.bk-menu.is-open{display:block}
.bk-menugroup{padding:4px 10px 6px;color:#5c5c60;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.bk-menuitem{display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:#1d1d1f;font:500 13.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:left;cursor:pointer}
.bk-menuitem:hover{background:#f1f1f4}
.bk-menuitem[aria-checked="true"]{font-weight:700}
.bk-menuitem[aria-checked="true"]::after{content:"\2713";color:#1f3d34}
.bk-search{padding:0 2px 8px}
/* INPUTS ARE TYPE-SCOPED AND STATE THEIR OWN FONT, and both halves are
   load-bearing.  This cover is appended to document.body inside ~20 host
   pages, so it sits INSIDE their cascades: metaeden-v4.css carries
   `body.grey input[type="text"], body.grey input[type="search"]` at (0,2,2),
   which outranked a bare `.bk-search input` (0,1,1) and painted the sidebar
   search as a white box of black Times New Roman inside a dark sidebar.
   Anything here that targets a bare element name will keep losing that way --
   scope to the cover class plus the attribute, and never inherit a font
   family from the host page. */
.met-bosskey-cover .bk-search input[type="search"]{width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.06);color:#dfe7e3;font:500 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-search input[type="search"]::placeholder{color:#7e948c}
.bk-badge{margin-left:auto;padding:1px 7px;border-radius:9px;background:#c8452f;color:#fff;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-topbar{display:flex;align-items:baseline;gap:10px;padding:12px 20px;border-bottom:1px solid #e5e5e8}
.bk-topic{flex:1 1 auto;min-width:0;overflow:hidden;color:#5c5c60;font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
.bk-members{flex:0 0 auto;white-space:nowrap;color:#5c5c60;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-msgacts{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .1s}
.bk-msg:hover .bk-msgacts{opacity:1}
.bk-msgacts button{width:26px;height:26px;border:1px solid #e2e2e6;border-radius:6px;background:#fff;color:#5c5c60;font-size:12px;line-height:1;cursor:pointer}
.bk-msgacts button:hover{background:#f4f4f6}
.bk-rxnrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.bk-rxn{padding:1px 8px;border:1px solid #d6e2ea;border-radius:10px;background:#eef4f8;color:#3b5566;white-space:nowrap;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-thread{margin-top:4px;color:#2f6ea8;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-msg{padding:2px 4px;border-radius:6px}
.bk-msg:hover{background:#f8f8fa}
.bk-composerbox{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border:1px solid #d8d8dc;border-radius:10px;background:#fff}
.bk-comptools{display:flex;gap:2px;padding:0 6px 6px}
.bk-comptools button{min-width:26px;height:24px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:#5c5c60;font:700 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1;cursor:pointer}
.bk-comptools button:hover{background:#f1f1f4}

/* THE COMPOSER INPUT'S BASE RULE LIVES HERE, ABOVE THE SKINS, and the
   position is the whole point: it is scoped the same (0,3,1) as the skin
   overrides -- it has to be, to outrank the host pages' body.grey input
   rules -- so with equal specificity, SOURCE ORDER decides.  Left below the
   skin blocks it silently beat them: the terminal composer went sans-serif
   with a light-grey border, and the spaces composer lost its roomier
   padding.  Every skin override must come after every base rule in this
   file; keep it that way.  Longhands, not the `font:` shorthand, so a skin
   can override the family alone without fighting a shorthand reset, and the
   colour is stated rather than inherited from the host page's UA default. */
.met-bosskey-cover .bk-composer input[type="text"]{flex:1 1 auto;min-width:0;padding:9px 12px;border:0;border-radius:0;background:transparent;color:#1d1d1f;font-size:14px;font-weight:400;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-composer input[type="text"]:focus{outline:none}
.met-bosskey-cover .bk-composerbox:focus-within{outline:2px solid #1f3d34;outline-offset:-1px}

/* ---- Titan dark main pane + plum sidebar (base skin) --------------------
   Scoped (0,2,x) so it beats the trailing base chunk but still loses to any
   .bk-skin-* rule (0,3,x); keep it ABOVE the skin blocks so input-rule ties
   resolve to the skins. */
.met-bosskey-cover .bk-banner,.met-bosskey-cover .bk-rail{background:#1c1021}
.met-bosskey-cover .bk-railws,.met-bosskey-cover .bk-logo,.met-bosskey-cover .bk-avatar-you{background:#5a2d63}
.met-bosskey-cover .bk-sidebar{background:#2b1a31}
.met-bosskey-cover .bk-navgroup{color:#b3a2bd}
.met-bosskey-cover .bk-wsuser{color:#b3a2bd}
.met-bosskey-cover .bk-navitem{color:#d5cbdc}
.met-bosskey-cover .bk-navitem.is-active{background:#7d3a8a;color:#fff}
.met-bosskey-cover .bk-workspace{font-size:15px}
.bk-offer{display:flex;align-items:center;gap:8px;margin:0 2px 8px;padding:9px 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.05);color:#e8e4ec;font:600 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:left;cursor:pointer}
.bk-offer i{font-style:normal;opacity:.8}
.bk-offerdot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#c88ad2}
.bk-solo,.bk-app{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:#d5cbdc;font:500 13.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:left;cursor:pointer}
.bk-solo:hover,.bk-app:hover{background:rgba(255,255,255,.08)}
.bk-solo i{font-style:normal}
.bk-appico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.14);color:#fff;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-style:normal}
.bk-ext{margin-left:auto;color:#b3a2bd;font-size:12px}
.met-bosskey-cover .bk-main{background:#1a151d}
.met-bosskey-cover .bk-topbar{border-bottom:1px solid #362e3e}
.met-bosskey-cover .bk-header{color:#ffffff}
.met-bosskey-cover .bk-topic,.met-bosskey-cover .bk-members,.met-bosskey-cover .bk-star{color:#b3a8bd}
.met-bosskey-cover .bk-topbtns button{border:1px solid #4a4252;background:transparent;color:#e8e4ec}
.met-bosskey-cover .bk-topbtns button:hover{background:rgba(255,255,255,.06)}
.met-bosskey-cover .bk-tabs{border-bottom-color:#362e3e}
.met-bosskey-cover .bk-tabs button{color:#b3a8bd}
.met-bosskey-cover .bk-tabs button.is-active{color:#fff;border-bottom-color:#fff}
.met-bosskey-cover .bk-msg:hover{background:rgba(255,255,255,.04)}
.met-bosskey-cover .bk-msgname{color:#ffffff}
.met-bosskey-cover .bk-msgtime{color:#b3a8bd}
.met-bosskey-cover .bk-msgbody p{color:#ddd6e3}
.met-bosskey-cover .bk-msgacts button{border-color:#4a4252;background:#241e2a;color:#cbc2d4}
.met-bosskey-cover .bk-msgacts button:hover{background:#362e3e}
.met-bosskey-cover .bk-rxn{border-color:#4a4252;background:#241e2a;color:#cbc2d4}
.met-bosskey-cover .bk-thread{color:#b48ce0}
.met-bosskey-cover .bk-day::before{background:#362e3e}
.met-bosskey-cover .bk-day span{border-color:#4a4252;background:#241e2a;color:#cbc2d4}
.met-bosskey-cover .bk-note{color:#b3a8bd}
.met-bosskey-cover .bk-note a{color:#b48ce0}
.met-bosskey-cover .bk-typing{color:#b3a8bd}
.met-bosskey-cover .bk-typedots i{background:#8f839b}
.met-bosskey-cover .bk-composerbox{border-color:#4a4252;background:#1f1a24}
.met-bosskey-cover .bk-composerbox:focus-within{outline-color:#8a5f99}
.met-bosskey-cover .bk-composer input[type="text"]{color:#e8e4ec}
.met-bosskey-cover .bk-composer input[type="text"]::placeholder{color:#9d92a8}
.met-bosskey-cover .bk-comptop button,.met-bosskey-cover .bk-comptools button{color:#b3a8bd}
.met-bosskey-cover .bk-comptop button:hover,.met-bosskey-cover .bk-comptools button:hover{background:rgba(255,255,255,.08)}
.met-bosskey-cover .bk-compsep{background:#4a4252}
.met-bosskey-cover .bk-composer button[type="submit"]{background:#7d3a8a}
/* Hero + cards: scoped and fully stated for the same host-cascade reason as
   .bk-doc/.bk-grid above.  Host pages style bare h2/h3/p (small-caps,
   underlines, serif, link-blue) and will win over any unscoped rule here. */
.met-bosskey-cover .bk-hero{padding:26px 4px 10px;max-width:760px}
.met-bosskey-cover .bk-hero h2{margin:0 0 6px;color:#fff;font:800 24px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;font-variant:normal;letter-spacing:normal;text-transform:none}
.met-bosskey-cover .bk-hero>p{margin:0 0 16px;color:#ddd6e3;font:14.5px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;font-variant:normal;letter-spacing:normal}
.bk-herocards{display:flex;gap:14px;flex-wrap:wrap}
.bk-card{flex:0 1 190px;min-height:110px;padding:14px;border-radius:10px;cursor:pointer}
.met-bosskey-cover .bk-card h3{margin:0 0 4px;color:#fff;font:700 14.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;font-variant:normal;letter-spacing:normal;text-transform:none}
.met-bosskey-cover .bk-card p{margin:0;color:rgba(255,255,255,.82);font:12.5px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;font-variant:normal;letter-spacing:normal}
.bk-card-a{background:#7a5a1e}
.bk-card-b{background:#1e4a66}
.bk-card-c{background:#4a2352}
/* Own the scrollbars: the host pages' retro Win95 scrollbar styling renders
   inside the cover otherwise, leaking the disguise. */
.met-bosskey-cover *::-webkit-scrollbar{width:10px;height:10px}
.met-bosskey-cover *::-webkit-scrollbar-track{background:transparent}
.met-bosskey-cover *::-webkit-scrollbar-thumb{background:rgba(128,128,140,.45);border-radius:5px;border:2px solid transparent;background-clip:content-box}
.met-bosskey-cover *::-webkit-scrollbar-button{display:none;width:0;height:0}
.met-bosskey-cover *{scrollbar-width:thin;scrollbar-color:rgba(128,128,140,.55) transparent}

/* ---- skin: Spaces (light, roomy, pill nav) ------------------------------ */
.bk-skin-spaces .bk-sidebar{background:#f6f8fa;color:#3c4043;border-right:1px solid #e3e6ea}
.bk-skin-spaces .bk-wsrow{border-bottom-color:#e3e6ea}
.bk-skin-spaces .bk-workspace{color:#1f2328}
.bk-skin-spaces .bk-wsuser{color:#5f6368}
.bk-skin-spaces .bk-logo{border-radius:50%;background:#1a6ef0}
.bk-skin-spaces .bk-kebab{color:#5f6368}
.bk-skin-spaces .bk-kebab:hover{background:#e8ecf1}
.bk-skin-spaces .bk-search input[type="search"]{border-color:#dfe3e8;background:#fff;color:#3c4043}
.bk-skin-spaces .bk-search input[type="search"]::placeholder{color:#5c5c60}
.bk-skin-spaces .bk-navgroup{color:#5f6368}
.bk-skin-spaces .bk-navitem{border-radius:20px;color:#3c4043;font-size:14px;padding:8px 12px}
.bk-skin-spaces .bk-navitem:hover{background:#e8ecf1}
.bk-skin-spaces .bk-navitem.is-active{background:#d7e6ff;color:#0b4bab}
.bk-skin-spaces .bk-navitem[data-bosskey-channel]:not([data-bosskey-channel^="dm-"])::before{content:"\2317";opacity:.55;font-weight:400}
.bk-skin-spaces .bk-badge{background:#1a6ef0}
.bk-skin-spaces .bk-topbar{padding:16px 24px;border-bottom-color:#e3e6ea}
.bk-skin-spaces .bk-header{font-size:17px}
.bk-skin-spaces .bk-messages{padding:20px 24px;gap:18px}
.bk-skin-spaces .bk-msg:hover{background:#f6f8fa}
.bk-skin-spaces .bk-msgbody p{font-size:14.5px;line-height:1.5}
.bk-skin-spaces .bk-rxn{border-color:#d7e6ff;background:#eef4ff;color:#0b4bab;border-radius:14px}
.bk-skin-spaces .bk-thread{color:#1a6ef0}
.bk-skin-spaces .bk-composer{padding:14px 24px}
.bk-skin-spaces .bk-composerbox{border-radius:26px;border-color:#dfe3e8;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bk-skin-spaces .bk-composer input[type="text"]{padding:11px 16px;color:#1f2328}
.bk-skin-spaces .bk-composerbox:focus-within{outline-color:#1a6ef0}
.bk-skin-spaces .bk-composer button[type="submit"]{border-radius:20px;background:#1a6ef0}
.bk-skin-spaces .bk-avatar,.bk-skin-spaces .bk-logo{font-weight:600}
.bk-skin-spaces .bk-signin-btn{background:#1a6ef0}
.bk-skin-spaces .bk-note a{color:#1a6ef0}
.bk-skin-spaces .bk-menuitem[aria-checked="true"]::after{color:#1a6ef0}

/* ---- skin: Terminal (monospace, IRC line format, EdenCity accents) ----- */
.bk-skin-terminal{background:#04060a;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-sidebar{background:#04060a;color:#00ffa0;border-right:1px dashed #0f5c3f}
.bk-skin-terminal .bk-wsrow{border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-logo{border-radius:0;background:#00ffa0;color:#04060a;font-family:inherit}
.bk-skin-terminal .bk-workspace,.bk-skin-terminal .bk-header{color:#ffd400;font-family:inherit}
.bk-skin-terminal .bk-wsuser{color:#5be7ff}
.bk-skin-terminal .bk-wsuser::before{background:#00ffa0}
.bk-skin-terminal .bk-kebab{color:#00ffa0;border:1px solid #0f5c3f;border-radius:0}
.bk-skin-terminal .bk-kebab:hover{background:#0b2019}
.bk-skin-terminal .bk-menu{border:1px solid #00ffa0;border-radius:0;background:#04060a;box-shadow:none}
.bk-skin-terminal .bk-menugroup{color:#5be7ff;font-family:inherit}
.bk-skin-terminal .bk-menuitem{border-radius:0;color:#00ffa0;font-family:inherit}
.bk-skin-terminal .bk-menuitem:hover{background:#0b2019}
.bk-skin-terminal .bk-menuitem[aria-checked="true"]::after{color:#ffd400}
.bk-skin-terminal .bk-search input[type="search"]{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#00ffa0;font-family:inherit}
.bk-skin-terminal .bk-search input[type="search"]::placeholder{color:#12a06d}
.bk-skin-terminal .bk-navgroup{color:#ff3da8;font-family:inherit}
.bk-skin-terminal .bk-navitem{border-radius:0;color:#00ffa0;font-family:inherit;font-weight:400}
.bk-skin-terminal .bk-navitem:hover{background:#0b2019}
.bk-skin-terminal .bk-navitem.is-active{background:#00ffa0;color:#04060a;font-weight:700}
.bk-skin-terminal .bk-navitem[data-bosskey-channel]:not([data-bosskey-channel^="dm-"])::before{content:"#";opacity:1}
.bk-skin-terminal .bk-dm::before{content:"@";opacity:.8}
.bk-skin-terminal .bk-dot{border-radius:0;background:#00ffa0}
.bk-skin-terminal .bk-dot-off{background:#0f5c3f}
.bk-skin-terminal .bk-badge{border-radius:0;background:#ff3da8;color:#04060a;font-family:inherit}
.bk-skin-terminal .bk-main{background:#04060a}
.bk-skin-terminal .bk-topbar{border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-topic,.bk-skin-terminal .bk-members{color:#0f9b6b;font-family:inherit}
.bk-skin-terminal .bk-messages{gap:2px;padding:14px 18px}
.bk-skin-terminal .bk-msg{padding:1px 2px;border-radius:0}
.bk-skin-terminal .bk-msg:hover{background:#0b2019}
.bk-skin-terminal .bk-avatar{display:none}
.bk-skin-terminal .bk-msgbody{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0;flex:1 1 auto}
.bk-skin-terminal .bk-msgtime{order:-1;color:#0f9b6b;font-family:inherit;font-size:13px}
.bk-skin-terminal .bk-msgtime::before{content:"["}
.bk-skin-terminal .bk-msgtime::after{content:"]"}
.bk-skin-terminal .bk-msgname{margin:0;color:#5be7ff;font-size:13px;font-weight:700;font-family:inherit}
.bk-skin-terminal .bk-msgname::before{content:"<"}
.bk-skin-terminal .bk-msgname::after{content:">"}
.bk-skin-terminal .bk-msgbody p{flex:1 1 auto;min-width:120px;margin:0;color:#00ffa0;font-family:inherit;font-size:13px;line-height:1.5}
.bk-skin-terminal .bk-msgacts button{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#00ffa0}
.bk-skin-terminal .bk-rxn{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#ffd400;font-family:inherit}
.bk-skin-terminal .bk-thread{color:#ff3da8;font-family:inherit}
.bk-skin-terminal .bk-thread::before{content:"\21B3 "}
.bk-skin-terminal .bk-composer{border-top:1px dashed #0f5c3f}
.bk-skin-terminal .bk-composerbox{border:1px solid #0f5c3f;border-radius:0;background:#04060a}
.bk-skin-terminal .bk-composer input[type="text"]{background:transparent;color:#00ffa0;font-family:"Courier New",Consolas,monospace;caret-color:#00ffa0}
.bk-skin-terminal .bk-composerbox:focus-within{outline:1px solid #00ffa0;outline-offset:0}
.bk-skin-terminal .bk-composer input[type="text"]::placeholder{color:#12a06d}
.bk-skin-terminal .bk-comptools button{color:#0f9b6b;border-radius:0;font-family:inherit}
.bk-skin-terminal .bk-composer button[type="submit"]{border-radius:0;background:#00ffa0;color:#04060a;font-family:inherit}
.bk-skin-terminal .bk-note{color:#0f9b6b;font-family:inherit}
.bk-skin-terminal .bk-note a{color:#5be7ff}
.bk-skin-terminal .bk-signin-btn{border-radius:0;background:#5be7ff;color:#04060a;font-family:inherit}
.bk-skin-terminal .bk-signin-alt{background:#0f5c3f;color:#00ffa0}

/* ---- boss-key gadgets (secret DM rows) ---------------------------------- */
.bk-navitem.is-running .bk-dot{background:#ffd400}
/* Skin-switcher DMs: Ty TAN (titan), GIGI SPACEY (spaces), CEE ELAI/OTT
   (CLI + aught = terminal).  Active skin's row glows its dot. */
.bk-navitem.is-skin-on .bk-dot{background:#c88ad2;box-shadow:0 0 0 3px rgba(200,138,210,.25)}
.bk-skin-spaces .bk-navitem.is-skin-on .bk-dot{background:#0b57d0;box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.bk-skin-terminal .bk-navitem.is-skin-on .bk-dot{background:#ffd400;box-shadow:none}
.bk-main{position:relative}
.bk-typing{display:flex;align-items:center;gap:7px;padding:2px 20px 8px;color:#5c5c60;font:500 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-typedots{display:inline-flex;gap:3px}
.bk-typedots i{width:5px;height:5px;border-radius:50%;background:#9a9aa0;animation:bkTypeDot 1.2s infinite}
.bk-typedots i:nth-child(2){animation-delay:.2s}
.bk-typedots i:nth-child(3){animation-delay:.4s}
@keyframes bkTypeDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
/* The sheet and agenda panels stay office-white in EVERY skin on purpose: a
   spreadsheet is the disguise's payload, and it reads as work precisely
   because it looks like the office suite, not like the chat theme. */
.bk-fxpanel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:#ffffff;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-fxbar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #d8d8dc;background:#f4f4f6}
.bk-fxtitle{flex:1 1 auto;min-width:0;overflow:hidden;color:#1d1d1f;font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}
.bk-fxclose{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#5c5c60;font-size:16px;line-height:1;cursor:pointer}
.bk-fxclose:hover{background:#e5e5e8}
.bk-formula{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid #e5e5e8}
.bk-formula span{color:#5c5c60;font:700 italic 12px Georgia,serif}
.bk-formula input{flex:1 1 auto;min-width:0;padding:4px 8px;border:1px solid #d8d8dc;border-radius:4px;background:#fff;color:#1d1d1f;font:12.5px Consolas,monospace}
.bk-grid{flex:1 1 auto;overflow:auto;padding:0}
/* Like the inputs above, the sheet/doc panels sit inside ~20 host pages'
   cascades that style bare table/th/h2/li tags -- every rule here is scoped
   to .met-bosskey-cover and states font/color/decoration explicitly. */
.met-bosskey-cover .bk-grid table{border-collapse:collapse;width:100%;font:13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-grid th{position:sticky;top:0;background:#f4f4f6;border:1px solid #d8d8dc;padding:4px 10px;color:#5c5c60;font:600 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;min-width:34px;letter-spacing:normal;text-transform:none}
.met-bosskey-cover .bk-grid tr th:first-child{text-align:center;min-width:34px}
.met-bosskey-cover .bk-grid td{border:1px solid #e5e5e8;padding:4px 10px;color:#1d1d1f;font:13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap}
.met-bosskey-cover .bk-grid td.bk-num{text-align:right;font-variant-numeric:tabular-nums}
.met-bosskey-cover .bk-grid tr:nth-child(2) td{font-weight:700;background:#fafafa}
.met-bosskey-cover .bk-grid tr:last-child td{font-weight:700;border-top:2px solid #9a9aa0}
.bk-doc{flex:1 1 auto;overflow:auto;padding:34px 48px;max-width:640px}
.met-bosskey-cover .bk-doc h1{margin:0 0 4px;color:#1d1d1f;font:700 22px Georgia,serif;text-decoration:none;text-transform:none;font-variant:normal;letter-spacing:normal}
.met-bosskey-cover .bk-docmeta{margin:0 0 18px;color:#5c5c60;font:13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-doc h2{margin:20px 0 6px;color:#1d1d1f;font:700 15px Georgia,serif;text-decoration:none;text-transform:none;font-variant:normal;letter-spacing:normal}
.met-bosskey-cover .bk-doc p,.met-bosskey-cover .bk-doc li{color:#2c2c2e;font:14px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.met-bosskey-cover .bk-doc ol,.met-bosskey-cover .bk-doc ul{margin:0;padding-left:22px;list-style-position:outside}
/* Calendar fullscreen button + fullscreened panel surfaces */
.met-bosskey-cover .bk-calfull{margin-right:2px;padding:5px 12px;border:1px solid #d8d8dc;border-radius:14px;background:#fff;color:#3c3c40;font:600 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.met-bosskey-cover .bk-calfull:hover{background:#f1f1f4}
.bk-fx-calendar:fullscreen{width:100vw;height:100vh}
.bk-skin-titan .bk-fx-calendar .bk-calfull{border-color:#4a4252;background:#241e2a;color:#cbc2d4}
.bk-skin-titan .bk-fx-calendar .bk-calfull:hover{background:#362e3e}
.bk-skin-spaces .bk-fx-calendar .bk-calfull{border-radius:18px}
.bk-skin-terminal .bk-fx-calendar .bk-calfull{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-calendar .bk-calfull:hover{background:#0b2019}
.bk-fx-calendar:fullscreen{background:#fff}
.bk-skin-titan .bk-fx-calendar:fullscreen{background:#1a151d}
.bk-skin-terminal .bk-fx-calendar:fullscreen{background:#04060a}
.bk-cal{flex:1 1 auto;display:flex;flex-direction:column;overflow:auto;padding:14px 18px 18px}
.bk-calhead{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:4px}
.met-bosskey-cover .bk-calhead span{padding:4px 8px;color:#5c5c60;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:right;text-transform:none;letter-spacing:normal}
.bk-calgrid{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(76px,1fr);gap:1px;background:#e5e5e8;border:1px solid #e5e5e8}
.bk-calcell{display:flex;flex-direction:column;gap:3px;padding:5px 6px;background:#fff;overflow:hidden}
.bk-caloff{background:#fafafa}
.met-bosskey-cover .bk-calnum{align-self:flex-end;color:#5c5c60;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-caltoday{outline:2px solid #2f6ea8;outline-offset:-2px}
.met-bosskey-cover .bk-caltoday .bk-calnum{color:#fff;background:#2f6ea8;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px}
.met-bosskey-cover .bk-calev{padding:1px 6px;border-radius:4px;color:#1d1d1f;font:500 11.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-calev-a{background:#dbe9f6}
.bk-calev-b{background:#f6ecd4}
.bk-calev-c{background:#e2f0e4}
/* Docs fx panel: word-processor facade */
/* The rename field is an input[type="text"] and must out-rank the host
   pages' body.grey input rules (0,2,2) AND state bg/font itself -- same
   cascade trap as the search/composer inputs above. */
.met-bosskey-cover .bk-fxbar input[type="text"].bk-docstitle{flex:0 1 auto;min-width:80px;max-width:320px;padding:3px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:#1d1d1f;font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;outline:none}
.met-bosskey-cover .bk-fxbar input[type="text"].bk-docstitle:hover{border-color:#d8d8dc}
.met-bosskey-cover .bk-fxbar input[type="text"].bk-docstitle:focus{border-color:#2f6ea8;background:#fff}
.met-bosskey-cover .bk-fxbar .bk-fxtitle{flex:1 1 auto}
.met-bosskey-cover .bk-docsave{margin-right:2px;padding:5px 14px;border:0;border-radius:14px;background:#2f6ea8;color:#fff;font:600 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.met-bosskey-cover .bk-docsave:hover{background:#255a8a}
.bk-docstools{display:flex;align-items:center;gap:2px;padding:5px 12px;border-bottom:1px solid #e5e5e8;background:#fff;flex-wrap:wrap}
.met-bosskey-cover .bk-docstools button{min-width:28px;height:26px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:#3c3c40;font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1;cursor:pointer}
.met-bosskey-cover .bk-docstools button:hover{background:#f1f1f4}
.bk-docssep{width:1px;height:18px;margin:0 6px;background:#d8d8dc}
.met-bosskey-cover .bk-docsselect{padding:3px 10px;border:1px solid #d8d8dc;border-radius:5px;color:#3c3c40;font:500 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap}
.met-bosskey-cover .bk-docsgrow{cursor:pointer}
.met-bosskey-cover .bk-docsgrow:hover{background:#f1f1f4}
.bk-docsdesk{flex:1 1 auto;overflow:auto;padding:22px 0;background:#ececf0;display:flex;justify-content:center}
.met-bosskey-cover .bk-docspage{width:min(760px,88%);min-height:940px;box-sizing:border-box;padding:70px 76px;border:0;border-radius:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);color:#1d1d1f;font:14.5px/1.65 Arial,-apple-system,"Segoe UI",Roboto,sans-serif;resize:none;outline:none}
.met-bosskey-cover .bk-docspage::placeholder{color:#8a8a8e}

/* ---- banner/rail anatomy deltas, kept AFTER every base rule ------------- */
.bk-skin-titan .bk-wsrow .bk-logo{display:none}
.bk-skin-titan .bk-workspace::after{content:" \02C5";color:#8ba39a;font-size:12px}
.bk-skin-spaces .bk-banner{background:#fff;border-bottom:1px solid #e3e6ea;color:#3c4043;padding:8px 14px}
.bk-skin-spaces .bk-brand{display:inline-flex;color:#3c4043}
.bk-skin-spaces .bk-bannernav{display:none}
.bk-skin-spaces .bk-bannerright button{color:#5f6368}
.bk-skin-spaces .bk-bannerright button:hover{background:#e8ecf1}
.bk-skin-spaces .bk-bannersearch input[type="search"]{border:0;background:#eef1f5;color:#3c4043;border-radius:20px;padding:8px 16px}
.bk-skin-spaces .bk-bannersearch input[type="search"]::placeholder{color:#5f6368}
.bk-skin-spaces .bk-rail{display:none}
.bk-skin-spaces .bk-search{display:none}
.bk-skin-spaces .bk-tabs{display:none}
.bk-skin-spaces .bk-topbtns button{border-radius:16px}
.bk-skin-spaces .bk-comptop{display:none}
.bk-skin-spaces .bk-day span{border:0;background:transparent;color:#5f6368;font-weight:600}
.bk-skin-spaces .bk-msgbody p{display:inline-block;max-width:520px;margin-top:4px;padding:8px 14px;border-radius:18px;background:#f0f1f3;color:#1f2328}
.bk-skin-spaces .bk-msg:hover{background:transparent}
.bk-skin-spaces .bk-avatar{border-radius:50%}
.bk-skin-spaces .bk-composerbox{flex-direction:row;align-items:center}
.bk-skin-spaces .bk-compbottom{padding:0 6px 0 0}
.bk-skin-spaces .bk-composer button[type="submit"]{width:32px;height:32px;border-radius:50%;background:#1a6ef0}
.bk-skin-terminal .bk-banner{background:#04060a;border-bottom:1px dashed #0f5c3f;color:#00ffa0}
.bk-skin-terminal .bk-bannernav button,.bk-skin-terminal .bk-bannerright button{color:#12a06d}
.bk-skin-terminal .bk-bannersearch input[type="search"]{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-bannersearch input[type="search"]::placeholder{color:#12a06d}
.bk-skin-terminal .bk-rail{display:none}
.bk-skin-terminal .bk-tabs{display:none}
.bk-skin-terminal .bk-comptop{display:none}
.bk-skin-terminal .bk-navadd{color:#12a06d;font-family:inherit;border-radius:0}
.bk-skin-terminal .bk-navadd:hover{background:#0b2019}
.bk-skin-terminal .bk-star{display:none}
.bk-skin-terminal .bk-topbtns{display:none}
.bk-skin-terminal .bk-day::before{background:#0f5c3f}
.bk-skin-terminal .bk-day span{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#ffd400;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-composer button[type="submit"]{width:auto;padding:0 10px}

.bk-logo {
  align-self: flex-start;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #1f3d34;
  color: #ffffff;
  font: 700 12px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}

.bk-workspace {
  padding: 0;
  color: #ffffff;
  font: 700 14px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bk-navitem[data-bosskey-channel]:not([data-bosskey-channel^="dm-"])::before{content:"#";flex:0 0 auto;opacity:.6;font-weight:700}
.bk-dm{position:relative}

.bk-navgroup {
  margin: 10px 8px 4px;
  color: #8ba39a;
  font: 700 12px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bk-navitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c9d6d1;
  font: 500 13.5px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.bk-header{flex:0 0 auto;white-space:nowrap}

.bk-navitem:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bk-navitem.is-active {
  background: #1f3d34;
  color: #ffffff;
  font-weight: 700;
}

.bk-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #3ba55d;
}

.bk-dot-off {
  background: #5b6b66;
}

.bk-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.bk-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e5e5e8;
  font: 700 15px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bk-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bk-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.bk-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font: 700 11px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bk-avatar-you {
  background: #1f3d34;
}

.bk-msgbody {
  min-width: 0;
}

.bk-msgname {
  margin-right: 8px;
  color: #1d1d1f;
  font: 700 13.5px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bk-msgtime {
  color: #5c5c60;
  font-size: 12px;
}

.bk-msgbody p {
  margin: 2px 0 0;
  color: #2c2c2e;
  font-size: 14px;
  line-height: 1.45;
}

.bk-note {
  margin: auto;
  padding: 6px 14px;
  color: #5c5c60;
  font: 500 12.5px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
}

.bk-note a {
  color: #1f3d34;
  text-decoration: underline;
}

.bk-note a:hover {
  color: #14261f;
}

.bk-signin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 280px;
}

.bk-signin p {
  margin: 0;
}

.bk-signin-btn {
  width: auto;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: #5865f2;
  color: #ffffff;
  font: 700 13.5px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.bk-signin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.bk-signin-alt {
  background: #44464b;
}

.bk-signin-note {
  min-height: 14px;
}

.bk-composer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e5e5e8;
}

.bk-composer button[type="submit"] {
  margin-left: auto;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #1f3d34;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .bk-sidebar {
    display: none;
  }
}

/* ---- skin fixes for the dark Titan base (must stay last) ---------------- */
.bk-skin-spaces .bk-offer,.bk-skin-spaces .bk-solo,.bk-skin-spaces .bk-comptop,.bk-skin-spaces .bk-tabs{display:none}
.bk-skin-spaces .bk-main{background:#ffffff}
.bk-skin-spaces .bk-topbar{border-bottom-color:#e3e6ea}
.bk-skin-spaces .bk-header{color:#1f2328}
.bk-skin-spaces .bk-topic,.bk-skin-spaces .bk-members,.bk-skin-spaces .bk-star{color:#5f6368}
.bk-skin-spaces .bk-topbtns button{border-color:#dfe3e8;background:#fff;color:#3c4043}
.bk-skin-spaces .bk-topbtns button:hover{background:#f6f8fa}
.bk-skin-spaces .bk-msgname{color:#1f2328}
.bk-skin-spaces .bk-msgtime{color:#5f6368}
.bk-skin-spaces .bk-msgbody p{color:#3c4043}
.bk-skin-spaces .bk-msgacts button{border-color:#dfe3e8;background:#fff;color:#5f6368}
.bk-skin-spaces .bk-msgacts button:hover{background:#f6f8fa}
.bk-skin-spaces .bk-day::before{background:#e3e6ea}
.bk-skin-spaces .bk-day span{border-color:#dfe3e8;background:#fff;color:#5f6368}
.bk-skin-spaces .bk-note{color:#5f6368}
.bk-skin-spaces .bk-typing{color:#5f6368}
.bk-skin-spaces .bk-typedots i{background:#9aa0a6}
.bk-skin-spaces .bk-composerbox{border-color:#dfe3e8;background:#fff}
.bk-skin-spaces .bk-composer input[type="text"]::placeholder{color:#5f6368}
.bk-skin-spaces .bk-comptools button{color:#5f6368}
.bk-skin-spaces .bk-comptools button:hover{background:#e8ecf1}
.bk-skin-spaces .bk-app{border-radius:20px;color:#3c4043}
.bk-skin-spaces .bk-app:hover{background:#e8ecf1}
.bk-skin-spaces .bk-appico{background:#d7e6ff;color:#0b4bab}
.bk-skin-spaces .bk-ext{color:#5f6368}
.bk-skin-spaces .bk-navadd{color:#3c4043}
.bk-skin-spaces .bk-hero h2{color:#1f2328}
.bk-skin-spaces .bk-hero>p{color:#3c4043}
.bk-skin-spaces .bk-card{border-radius:14px}
.bk-skin-terminal .bk-offer{border:1px dashed #0f5c3f;border-radius:0;background:#04060a;color:#ffd400;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-offerdot{border-radius:0;background:#ff3da8}
.bk-skin-terminal .bk-solo,.bk-skin-terminal .bk-app{border-radius:0;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-solo:hover,.bk-skin-terminal .bk-app:hover{background:#0b2019}
.bk-skin-terminal .bk-appico{border-radius:0;background:#0f5c3f;color:#00ffa0;font-family:inherit}
.bk-skin-terminal .bk-ext{color:#5be7ff}
.bk-skin-terminal .bk-tabs{border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-tabs button{color:#12a06d;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-tabs button.is-active{color:#ffd400;border-bottom-color:#ffd400}
.bk-skin-terminal .bk-topbtns button{border:1px solid #0f5c3f;border-radius:0;background:#04060a;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-hero h2{color:#ffd400;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-hero>p{color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-card{border:1px solid #0f5c3f;border-radius:0;background:#04060a}
.bk-skin-terminal .bk-card h3{color:#5be7ff;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-card p{color:#12a06d;font-family:"Courier New",Consolas,monospace}

/* ---- Spaces v2: rooms-chat layout (bk-sp elements live only here) -------- */
.met-bosskey-cover .bk-sp{display:none}
.bk-skin-spaces .bk-sp{display:flex}
.bk-skin-spaces .bk-rail,.bk-skin-spaces .bk-bannernav,.bk-skin-spaces .bk-topic,.bk-skin-spaces .bk-topbtns,.bk-skin-spaces .bk-members,.bk-skin-spaces .bk-star,.bk-skin-spaces .bk-msgacts,.bk-skin-spaces .bk-navadd,.bk-skin-spaces .bk-search{display:none}
.bk-skin-spaces .bk-navitem[data-bosskey-channel]::before{content:none}
.bk-skin-spaces{background:#fff}
.bk-skin-spaces .bk-banner{background:#fff;border-bottom:0;padding:10px 16px;gap:14px}
.bk-skin-spaces .bk-ham{align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#444;font-size:16px;cursor:pointer}
.bk-skin-spaces .bk-ham:hover{background:#f0f4f9}
.bk-skin-spaces .bk-brandmark{background:#0aa15c;border-radius:8px 8px 8px 2px}
.bk-skin-spaces .bk-brandname{font-size:0}
.bk-skin-spaces .bk-brandname::after{content:"Spaces";color:#444;font:400 20px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-skin-spaces .bk-bannersearch{flex:0 1 720px;margin-right:auto}
.bk-skin-spaces .bk-bannersearch input[type="search"]{border:0;border-radius:24px;background:#eef1f5;color:#1f1f1f;padding:12px 18px 12px 44px;font-size:15px}
.bk-skin-spaces .bk-bannersearch{position:relative}
.bk-skin-spaces .bk-bannersearch::before{content:"\2315";position:absolute;left:16px;top:50%;transform:translateY(-50%) rotate(90deg);color:#5f6368;font-size:16px;z-index:1}
.bk-skin-spaces .bk-bannerright{display:flex;align-items:center;gap:6px}
.bk-skin-spaces .bk-bannerright button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#444;font-size:15px;cursor:pointer}
.bk-skin-spaces .bk-bannerright button:hover{background:#f0f4f9}
.bk-skin-spaces .bk-active{align-items:center;gap:7px;padding:8px 14px;border:1px solid #dadce0;border-radius:18px;background:#fff;color:#1f1f1f;font:500 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap}
.bk-skin-spaces .bk-active i{width:9px;height:9px;border-radius:50%;background:#0aa15c}
.bk-skin-spaces .bk-bavatar{align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#7a4a6a;color:#fff;font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-skin-spaces .bk-sidebar{border-right:0;padding:6px 12px}
.bk-skin-spaces .bk-wsrow{border-bottom:0;padding-bottom:2px}
.bk-skin-spaces .bk-logo{border-radius:50%;background:#0aa15c;font-size:0}
.bk-skin-spaces .bk-logo::after{content:"\25CF";color:#fff;font-size:12px}
.bk-skin-spaces .bk-workspace{font-size:0}
.bk-skin-spaces .bk-workspace::after{content:"Chat";color:#1f1f1f;font:500 15px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-skin-spaces .bk-newchat{align-items:center;gap:10px;align-self:flex-start;margin:6px 2px 12px;padding:12px 20px 12px 16px;border:1px solid #e0e3e7;border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.18);color:#1f1f1f;font:500 14px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-skin-spaces .bk-newchat:hover{background:#f6f8fa}
.bk-skin-spaces .bk-newchat i{font-style:normal;color:#444}
.bk-skin-spaces .bk-navgroup{margin:12px 8px 4px;color:#444;font:500 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:normal;text-transform:none;display:flex;align-items:center;gap:6px}
.bk-skin-spaces .bk-navgroup::before{content:"\25BE";color:#5f6368;font-size:11px}
.bk-skin-spaces .bk-navgroup[data-bk="channels"]{font-size:0}
.bk-skin-spaces .bk-navgroup[data-bk="channels"]::after{content:"Spaces";color:#444;font:500 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-skin-spaces .bk-shortcut{align-items:center;gap:12px;width:100%;padding:8px 12px;border:0;border-radius:20px;background:transparent;color:#3c4043;font:500 14px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:left;cursor:pointer}
.bk-skin-spaces .bk-shortcut:hover{background:#f0f4f9}
.bk-skin-spaces .bk-shortcut.is-active{background:#d3e3fd;color:#0b57d0}
.bk-skin-spaces .bk-shortcut i{font-style:normal;width:18px;text-align:center}
.bk-skin-spaces .bk-navitem{font-size:14px}
.bk-skin-spaces .bk-navitem.is-active{background:#d3e3fd;color:#0b57d0}
.bk-skin-spaces .bk-dot{width:22px;height:22px;border-radius:50%;background:#7a8b99}
.bk-skin-spaces .bk-dot-off{background:#c4ccd4}
.bk-skin-spaces .bk-badge{background:#0b57d0}
.bk-skin-spaces .bk-solo{display:none}
.bk-skin-spaces .bk-main{margin:0 16px 16px 8px;border:1px solid #e0e3e7;border-radius:16px;overflow:hidden}
.bk-skin-spaces .bk-topbar{padding:14px 20px;border-bottom-color:#e8eaed}
.bk-skin-spaces .bk-header{font:500 16px -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bk-skin-spaces .bk-messages{padding:16px 24px;gap:10px}
.bk-skin-spaces .bk-msg{gap:10px;padding:0}
.bk-skin-spaces .bk-msg:hover{background:transparent}
.bk-skin-spaces .bk-avatar{width:32px;height:32px;border-radius:50%;font-size:11px}
.bk-skin-spaces .bk-msgbody{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.bk-skin-spaces .bk-msgname{font:700 12.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1f1f1f}
.bk-skin-spaces .bk-msgtime{font-size:12px;color:#5f6368}
.bk-skin-spaces .bk-msgbody p{margin:0;padding:8px 14px;border-radius:18px;background:#f0f4f9;color:#1f1f1f;font-size:14px;line-height:1.45;max-width:520px}
.bk-skin-spaces .bk-msg:has(.bk-avatar-you){flex-direction:row-reverse}
.bk-skin-spaces .bk-msg:has(.bk-avatar-you) .bk-avatar,.bk-skin-spaces .bk-msg:has(.bk-avatar-you) .bk-msgname{display:none}
.bk-skin-spaces .bk-msg:has(.bk-avatar-you) .bk-msgbody{align-items:flex-end}
.bk-skin-spaces .bk-msg:has(.bk-avatar-you) .bk-msgbody p{background:#d3e3fd;color:#0d3c78}
.bk-skin-spaces .bk-day::before{content:none}
.bk-skin-spaces .bk-day{justify-content:center}
.bk-skin-spaces .bk-day span{border:0;background:transparent;color:#5f6368;font-size:12.5px}
.bk-skin-spaces .bk-rxnrow{margin-top:2px}
.bk-skin-spaces .bk-thread{color:#0b57d0}
.bk-skin-spaces .bk-replies{gap:10px;padding:4px 24px 2px}
.bk-skin-spaces .bk-replies button{padding:7px 16px;border:1px solid #dadce0;border-radius:18px;background:#fff;color:#0b57d0;font:500 13.5px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-skin-spaces .bk-replies button:hover{background:#f0f4f9}
.bk-skin-spaces .bk-composer{align-items:center;gap:12px;padding:12px 20px 18px;border-top:0}
.bk-skin-spaces .bk-plus{align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border:1px solid #e0e3e7;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.18);color:#0b57d0;font-size:20px;line-height:1;cursor:pointer}
.bk-skin-spaces .bk-plus:hover{background:#f6f8fa}
.bk-skin-spaces .bk-composerbox{flex-direction:row;align-items:center;border:0;border-radius:24px;background:#eef1f5;box-shadow:none;padding:2px 10px 2px 4px}
.bk-skin-spaces .bk-composerbox:focus-within{outline:2px solid #0b57d0;outline-offset:-2px}
.bk-skin-spaces .bk-comptop{display:none}
.bk-skin-spaces .bk-composer input[type="text"]{padding:12px 14px}
.bk-skin-spaces .bk-compbottom{display:flex;align-items:center;padding:0}
.bk-skin-spaces .bk-comptools{padding:0}
.bk-skin-spaces .bk-comptools button{width:34px;height:34px;border-radius:50%;color:#444;font-size:14px}
.bk-skin-spaces .bk-comptools button:first-child{display:none}
.bk-skin-spaces .bk-composer button[type="submit"]{width:38px;height:38px;border-radius:50%;background:transparent;color:#5f6368;font-size:16px}
.bk-skin-spaces .bk-composer button[type="submit"]:hover{background:#e4e9ef;color:#0b57d0}
.bk-skin-spaces .bk-siderail{flex:0 0 52px;flex-direction:column;align-items:center;gap:14px;padding:18px 0;border-left:1px solid #e8eaed;background:#fff}
.bk-skin-spaces .bk-siderail button{width:32px;height:32px;border:0;border-radius:8px;font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.bk-skin-spaces .bk-sr-a{background:#e8f0fe;color:#0b57d0}
.bk-skin-spaces .bk-sr-b{background:#e6f4ea;color:#137333}
.bk-skin-spaces .bk-sr-c{background:#fef7e0;color:#b06000}
.bk-skin-spaces .bk-siderail button:not([class*="bk-sr"]){background:transparent;color:#5f6368;font-size:16px}
.bk-skin-spaces .bk-srsep{width:24px;height:1px;background:#e8eaed}
.bk-skin-spaces .bk-typing{padding-left:24px}
.bk-skin-spaces .bk-hero h2{font-weight:500}
.bk-skin-spaces .bk-card{border:1px solid #e0e3e7}
.bk-skin-spaces .bk-card-a{background:#e8f0fe}
.bk-skin-spaces .bk-card-b{background:#e6f4ea}
.bk-skin-spaces .bk-card-c{background:#fef7e0}
.bk-skin-spaces .bk-card h3{color:#1f1f1f}
.bk-skin-spaces .bk-card p{color:#444}

/* ---- Docs panel, themed per skin (overrides the office-white default;
   equal specificity to the base rules, so this block must stay at the very
   end of the file) --------------------------------------------------------- */
.bk-skin-titan .bk-fx-docs{background:#1a151d}
.bk-skin-titan .bk-fx-docs .bk-fxbar{background:#241e2a;border-bottom-color:#362e3e}
.bk-skin-titan .bk-fx-docs .bk-fxtitle{color:#e8e4ec}
.bk-skin-titan .bk-fx-docs input[type="text"].bk-docstitle{background:transparent;color:#fff}
.bk-skin-titan .bk-fx-docs input[type="text"].bk-docstitle:hover{border-color:#4a4252}
.bk-skin-titan .bk-fx-docs input[type="text"].bk-docstitle:focus{border-color:#8a5f99;background:#1f1a24}
.bk-skin-titan .bk-fx-docs .bk-fxclose{color:#b3a8bd}
.bk-skin-titan .bk-fx-docs .bk-fxclose:hover{background:#362e3e}
.bk-skin-titan .bk-fx-docs .bk-docsave{background:#7d3a8a}
.bk-skin-titan .bk-fx-docs .bk-docsave:hover{background:#8f4a9c}
.bk-skin-titan .bk-fx-docs .bk-docstools{background:#241e2a;border-bottom-color:#362e3e}
.bk-skin-titan .bk-fx-docs .bk-docstools button{color:#cbc2d4}
.bk-skin-titan .bk-fx-docs .bk-docstools button:hover{background:#362e3e}
.bk-skin-titan .bk-fx-docs .bk-docssep{background:#4a4252}
.bk-skin-titan .bk-fx-docs .bk-docsselect{border-color:#4a4252;color:#cbc2d4}
.bk-skin-titan .bk-fx-docs .bk-docsgrow:hover{background:#362e3e}
.bk-skin-titan .bk-fx-docs .bk-docsdesk{background:#141018}
.bk-skin-titan .bk-fx-docs .bk-docspage{background:#241e2a;color:#e8e4ec;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.bk-skin-titan .bk-fx-docs .bk-docspage::placeholder{color:#8f839b}
.bk-skin-spaces .bk-fx-docs .bk-docsave{border-radius:18px;background:#0b57d0}
.bk-skin-spaces .bk-fx-docs .bk-docsave:hover{background:#0a4cb8}
.bk-skin-spaces .bk-fx-docs input[type="text"].bk-docstitle{background:transparent;color:#1f1f1f}
.bk-skin-spaces .bk-fx-docs input[type="text"].bk-docstitle:focus{border-color:#0b57d0;background:#fff}
.bk-skin-spaces .bk-fx-docs .bk-docsselect{border-radius:14px}
.bk-skin-spaces .bk-fx-docs .bk-docstools button{border-radius:50%}
.bk-skin-spaces .bk-fx-docs .bk-docsdesk{background:#f8fafd}
.bk-skin-spaces .bk-fx-docs .bk-docspage{border:1px solid #e0e3e7;box-shadow:none;border-radius:8px}
.bk-skin-terminal .bk-fx-docs{background:#04060a}
.bk-skin-terminal .bk-fx-docs .bk-fxbar{background:#04060a;border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-fx-docs .bk-fxtitle{color:#ffd400;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-docs input[type="text"].bk-docstitle{background:transparent;color:#ffd400;font:600 13px "Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-docs input[type="text"].bk-docstitle:hover{border-color:#0f5c3f}
.bk-skin-terminal .bk-fx-docs input[type="text"].bk-docstitle:focus{border-color:#00ffa0;background:#04060a}
.bk-skin-terminal .bk-fx-docs .bk-fxclose{color:#00ffa0;border:1px solid #0f5c3f;border-radius:0}
.bk-skin-terminal .bk-fx-docs .bk-fxclose:hover{background:#0b2019}
.bk-skin-terminal .bk-fx-docs .bk-docsave{border-radius:0;background:#00ffa0;color:#04060a;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-docs .bk-docsave:hover{background:#5be7ff}
.bk-skin-terminal .bk-fx-docs .bk-docstools{background:#04060a;border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-fx-docs .bk-docstools button{border-radius:0;color:#00ffa0;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-docs .bk-docstools button:hover{background:#0b2019}
.bk-skin-terminal .bk-fx-docs .bk-docssep{background:#0f5c3f}
.bk-skin-terminal .bk-fx-docs .bk-docsselect{border:1px solid #0f5c3f;border-radius:0;color:#5be7ff;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-docs .bk-docsgrow:hover{background:#0b2019}
.bk-skin-terminal .bk-fx-docs .bk-docsdesk{background:#020304}
.bk-skin-terminal .bk-fx-docs .bk-docspage{border:1px solid #0f5c3f;border-radius:0;background:#04060a;box-shadow:none;color:#00ffa0;font:13.5px/1.7 "Courier New",Consolas,monospace;caret-color:#00ffa0}
.bk-skin-terminal .bk-fx-docs .bk-docspage::placeholder{color:#12a06d}

/* ---- Calendar panel, themed per skin (same end-of-file rule as Docs) ---- */
.bk-skin-titan .bk-fx-calendar{background:#1a151d}
.bk-skin-titan .bk-fx-calendar .bk-fxbar{background:#241e2a;border-bottom-color:#362e3e}
.bk-skin-titan .bk-fx-calendar .bk-fxtitle{color:#e8e4ec}
.bk-skin-titan .bk-fx-calendar .bk-fxclose{color:#b3a8bd}
.bk-skin-titan .bk-fx-calendar .bk-fxclose:hover{background:#362e3e}
.bk-skin-titan .bk-fx-calendar .bk-calhead span{color:#b3a8bd}
.bk-skin-titan .bk-fx-calendar .bk-calgrid{background:#362e3e;border-color:#362e3e}
.bk-skin-titan .bk-fx-calendar .bk-calcell{background:#241e2a}
.bk-skin-titan .bk-fx-calendar .bk-caloff{background:#1f1a24}
.bk-skin-titan .bk-fx-calendar .bk-calnum{color:#b3a8bd}
.bk-skin-titan .bk-fx-calendar .bk-caltoday{outline-color:#c88ad2}
.bk-skin-titan .bk-fx-calendar .bk-caltoday .bk-calnum{background:#7d3a8a;color:#fff}
.bk-skin-titan .bk-fx-calendar .bk-calev{color:#f0eaf4}
.bk-skin-titan .bk-fx-calendar .bk-calev-a{background:#3d3550}
.bk-skin-titan .bk-fx-calendar .bk-calev-b{background:#4a2352}
.bk-skin-titan .bk-fx-calendar .bk-calev-c{background:#2e3d50}
.bk-skin-spaces .bk-fx-calendar .bk-fxbar{background:#fff;border-bottom-color:#e8eaed}
.bk-skin-spaces .bk-fx-calendar .bk-calgrid{background:#e8eaed;border-color:#e8eaed;border-radius:8px;overflow:hidden}
.bk-skin-spaces .bk-fx-calendar .bk-calhead span{color:#5f6368}
.bk-skin-spaces .bk-fx-calendar .bk-caltoday{outline-color:#0b57d0}
.bk-skin-spaces .bk-fx-calendar .bk-caltoday .bk-calnum{background:#0b57d0}
.bk-skin-spaces .bk-fx-calendar .bk-calev-a{background:#e8f0fe}
.bk-skin-spaces .bk-fx-calendar .bk-calev-b{background:#fef7e0}
.bk-skin-spaces .bk-fx-calendar .bk-calev-c{background:#e6f4ea}
.bk-skin-terminal .bk-fx-calendar{background:#04060a}
.bk-skin-terminal .bk-fx-calendar .bk-fxbar{background:#04060a;border-bottom:1px dashed #0f5c3f}
.bk-skin-terminal .bk-fx-calendar .bk-fxtitle{color:#ffd400;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-calendar .bk-fxclose{color:#00ffa0;border:1px solid #0f5c3f;border-radius:0}
.bk-skin-terminal .bk-fx-calendar .bk-fxclose:hover{background:#0b2019}
.bk-skin-terminal .bk-fx-calendar .bk-calhead span{color:#5be7ff;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-calendar .bk-calgrid{background:#0f5c3f;border-color:#0f5c3f}
.bk-skin-terminal .bk-fx-calendar .bk-calcell{background:#04060a}
.bk-skin-terminal .bk-fx-calendar .bk-caloff{background:#020304}
.bk-skin-terminal .bk-fx-calendar .bk-calnum{color:#12a06d;font-family:"Courier New",Consolas,monospace}
.bk-skin-terminal .bk-fx-calendar .bk-caltoday{outline-color:#ffd400}
.bk-skin-terminal .bk-fx-calendar .bk-caltoday .bk-calnum{background:#ffd400;color:#04060a;border-radius:0}
.bk-skin-terminal .bk-fx-calendar .bk-calev{color:#00ffa0;font-family:"Courier New",Consolas,monospace;border:1px solid #0f5c3f;border-radius:0;background:#04060a}
.bk-skin-terminal .bk-fx-calendar .bk-calev-a{border-color:#0f5c3f}
.bk-skin-terminal .bk-fx-calendar .bk-calev-b{border-color:#7a5a1e;color:#ffd400}
.bk-skin-terminal .bk-fx-calendar .bk-calev-c{border-color:#1e4a66;color:#5be7ff}

/* ===========================================================================
   WHO IS AT THIS DESK (TASK-1384[Q]).

   The middle slot of the status bar, naming the Discord pilot and the .com
   avatar.  It sits between two spans the chrome has always carried, and
   space-between already puts it in the middle, so there is no layout to add.

   It is BLACK on the same face as its neighbours, not a dimmer grey: the two
   beside it are a 1996 joke and this one is information the visitor asked to
   be told, so it must not read as the quietest thing on the bar.  Bold gives
   it the weight without a second colour, which keeps the chrome monochrome.

   It never changes the bar's height, whether it is filled or hidden -- the
   bar is sized by its own padding and the two spans that are always there.
   =========================================================================== */
.browser-status-who {
  font-weight: bold;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow frames run out of room before the two joke spans do, and the joke is
   not worth truncating the answer for -- the middle slot is what somebody is
   reading.  It gets whatever room it needs first. */
@media (max-width: 900px) {
  .browser-statusbar > span[aria-hidden="true"] { display: none; }
  .browser-status-who { white-space: normal; }
}

/* ===========================================================================
   THE MET-ID DESK (TASK-1409[Q]).  met-desk.js builds this; it is the
   reduced membership door the Dial Up menu opens on every metro site.

   It is dressed as the same 1996 dialog the rest of this chrome is: the
   #c0c0c0 face, the outset bevel, the navy title bar.  It lives here rather
   than in a stylesheet of its own because every page that has the desk has
   this file already, and a second request for forty lines is a request
   nobody needs to make.

   READABILITY (CLAUDE.md): body text is 13px and black on #c0c0c0, which is
   over 10:1.  The one dim thing here is the placeholder, and a placeholder
   is not text somebody has to read.
   =========================================================================== */
.browser-metdesk {
  position: fixed;
  inset: 0;
  /* PAGE band (see THE Z SCALE above): over the CRT wash at 200 and over
     every floating window at 70..99, and deliberately UNDER the chrome
     bars at 1001..1006. This is a dialog opened from inside a 1996
     browser, so that browser's own bars stay drawn over its dimmed
     page. 400 was the first draft and sat in the closed 300..999 gap. */
  z-index: 250;
  display: none;  /* flex when open; met-desk.js owns this */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.browser-metdesk-box {
  width: 380px;
  max-width: calc(100vw - 32px);
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  font: 13px Arial, Helvetica, sans-serif;
  color: #000000;
}

.browser-metdesk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
  background: #000080;
  color: #ffffff;
  font: bold 13px Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
}

.browser-metdesk-x {
  min-width: 20px;
  height: 18px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 1;
  cursor: pointer;
}

.browser-metdesk-body { padding: 12px; }

/* A section label.  10px is under the 12px floor on purpose: it is a heading
   ABOVE the field it names, never the thing being read. */
.browser-metdesk-tag {
  margin: 0 0 4px;
  font: bold 10px Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  color: #000000;
}
.browser-metdesk-tag + .browser-metdesk-tag,
.browser-metdesk-field + .browser-metdesk-tag { margin-top: 10px; }

.browser-metdesk-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 2px inset #eeeeee;
  background: #ffffff;
  color: #000000;
  font: 13px 'Courier New', Courier, monospace;
}
.browser-metdesk-area { height: 74px; resize: none; }

/* The one line that talks back.  It carries every outcome, so it is 13px and
   black by default; good and bad only add a colour, never take the weight
   away, because a refusal that is harder to read than a success is backwards.
   Both colours are measured on #c0c0c0: #006600 is 5.1:1, #a00000 is 5.4:1. */
.browser-metdesk-say {
  margin: 10px 0 0;
  font: 13px Arial, Helvetica, sans-serif;
  color: #000000;
}
.browser-metdesk-say.good { color: #006600; font-weight: bold; }
.browser-metdesk-say.bad  { color: #a00000; font-weight: bold; }

.browser-metdesk-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.browser-metdesk-btn {
  padding: 5px 10px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: bold 12px Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
/* Pressed state changes the BEVEL, not the box: outset and inset are the same
   2px, so nothing on the row moves.  (CLAUDE.md: no layout jitter.) */
.browser-metdesk-btn:active { border-style: inset; }

/* The cards this machine holds.  A fixed height rather than max-height, so a
   machine with one card and a machine with six open the same-sized dialog. */
.browser-metdesk-list {
  height: 108px;
  overflow-y: auto;
  border: 2px inset #eeeeee;
  background: #ffffff;
}

.browser-metdesk-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid #d4d4d4;
  background: #ffffff;
  color: #000000;
  font: 13px Arial, Helvetica, sans-serif;
  text-align: left;
  cursor: pointer;
}
.browser-metdesk-row:hover { background: #000080; color: #ffffff; }
.browser-metdesk-row span { font: 12px 'Courier New', Courier, monospace; }

.browser-metdesk-qr { text-align: center; }
.browser-metdesk-qr svg { width: 148px; height: 148px; }

/* THE SITE LIST (TASK-1423[Q]). Wider than the desk because each row carries
   a name, an address and three controls, and a fixed height for the reason the
   desk has one: the list grows as sites are added and the dialog must not.
   Same .browser-* family as everything else here, which is what keeps this
   stylesheet inert once its JS stands down on mobile. */
.browser-metdesk-box.browser-sitesbox{width:560px;max-width:calc(100vw - 32px)}
.browser-sitelist{height:300px;overflow-y:auto;border:2px inset #eeeeee;background:#ffffff;margin-top:10px}
.browser-siterow{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:6px 8px;border-bottom:1px solid #d4d4d4}
/* A hidden site is DIMMED, not removed: an admin has to be able to find the
   thing they hid in order to unhide it. 45% keeps it legible at 13px. */
.browser-siterow.off{opacity:.45}
.browser-sitename{display:flex;flex-direction:column;min-width:0}
.browser-sitename b{font:13px Arial,Helvetica,sans-serif;color:#000000}
.browser-sitename span{font:11px "Courier New",Courier,monospace;color:#333333;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-siteacts{display:flex;gap:4px;flex:none}
/* 12px, not 11: these are labels somebody presses, and the readability floor
   in CLAUDE.md applies to anything load-bearing. The address line below stays
   at 11 because it is a machine address under a name, not the thing read. */
.browser-siteacts button{min-width:26px;padding:2px 6px;border:2px outset #eeeeee;
background:#c0c0c0;color:#000000;font:bold 12px Arial,Helvetica,sans-serif;cursor:pointer}
.browser-siteacts button:active{border-style:inset}
.browser-siteacts button[disabled]{opacity:.4;cursor:default}