/* ---------------------------------------------------------------------------
   The Terminal shell: left icon rail, sticky header with a mono kicker, the
   ticker tape, and the phone tab bar. Loaded after styles.css and deliberately
   overrides the older header rules rather than editing them in place, so the
   dashboard's own tab logic keeps working untouched.
   --------------------------------------------------------------------------- */

body {
  background:
    radial-gradient(1000px 560px at 76% -14%, rgba(198,242,78,.10), transparent 62%),
    radial-gradient(680px 400px at 2% 4%, rgba(90,140,255,.07), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #20262C; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
a { color: var(--accent); }
a:hover { color: var(--accent-hi); }

/* ---------- page frame ---------- */
.frame { display: flex; min-height: 100vh; }
/* the mockup: the sticky header spans the whole window minus the rail, while
   the content below it is capped at 1760px and left-aligned */
.shell { max-width: none; margin: 0;              /* styles.css caps it at 1240 centered — undo */
         padding: 0 22px 48px; flex: 1; min-width: 0; }
.shell > :not(.hdr) { max-width: 1760px; }

/* ---------- left rail ---------- */
.rail {
  width: 98px; flex: none; position: sticky; top: 0; height: 100vh;
  background: #08090B; border-right: 1px solid #16191D;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 9px; gap: 4px; z-index: 40;
}
.mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent);
  color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; margin-bottom: 13px; text-decoration: none; flex: none;
}
.mark:hover { background: var(--accent-hi); color: var(--on-accent); }
.rnav { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.rl {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 11px; text-decoration: none;
  color: #5E666E; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.rl .g { font-size: 19px; line-height: 1; }
.rl:hover { color: var(--ink); background: #12161A; }
.rl.on { color: var(--accent); background: rgba(198,242,78,.10); }
.ver {
  margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: 8.5px;
  color: #4A5158; writing-mode: vertical-rl; letter-spacing: .22em;
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: rgba(7,8,10,.88); backdrop-filter: blur(16px);
  border-bottom: 1px solid #16191D; margin: 0 -22px 16px;
}
.hbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px; }
.htitle { min-width: 0; flex: 0 1 auto; }
.kicker {
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .22em;
  color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ttl {
  font-weight: 700; font-size: 21px; letter-spacing: -.02em;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* the session chip is taller than a 1.2 line box and this element clips its
     overflow for the ellipsis, so the chip's top border was being sliced off
     (reported on mobile, 2026-09-02). The line box has to fit the chip. */
  line-height: 1.5; padding-top: 1px;
}
/* session chip beside the date. Deliberately quieter than the title: it is a
   status, not the headline, and "closed" is the normal state most of the day. */
.mkt {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; padding: 3px 7px; border-radius: 3px;
  vertical-align: 2px; margin-left: 8px; white-space: nowrap;
  text-transform: uppercase;
}
.mkt.open { color: var(--accent); background: rgba(198, 242, 78, .1);
            border: 1px solid rgba(198, 242, 78, .3); }
.mkt.shut { color: #6B747D; background: #0F1216; border: 1px solid #1D2126; }
@media (max-width: 640px) { .mkt { font-size: 9px; margin-left: 6px; } }

.cmdk {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  border: 1px solid #232930; background: #0C0E11; border-radius: var(--r-ctl);
  padding: 9px 13px; flex: 1 1 150px; min-width: 96px; max-width: 320px; margin-left: auto;
}
.cmdk:hover { border-color: #3B444D; }
.cmdk .cx { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--accent); }
.cmdk .cp { font-size: 13px; color: var(--ink-3); flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk .kbd { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3);
             border: 1px solid #232930; border-radius: 4px; padding: 1px 5px; flex: none; }
.livem {
  display: flex; align-items: center; gap: 8px; flex: none;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap;
}
.pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
       animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.acct { display: flex; align-items: center; gap: 6px; flex: none; }
.acct .tab, .acct a { font-size: 12.5px; font-weight: 600; padding: 8px 12px;
                      border-radius: 9px; text-decoration: none; }
.acct .signin { background: var(--accent); color: var(--on-accent); }
.acct .signin:hover { background: var(--accent-hi); color: var(--on-accent); }
.acct .who { color: var(--ink-2); font-size: 12px; max-width: 150px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ticker tape ---------- */
.tape { height: 26px; border-top: 1px solid #121519; overflow: hidden;
        display: flex; align-items: center; }
.trk { display: flex; gap: 18px; padding-left: 22px; white-space: nowrap;
       animation: tape 46s linear infinite;
       font-family: "JetBrains Mono", monospace; font-size: 10px; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ti { display: flex; gap: 5px; align-items: center; color: var(--ink-3); }
.ti b { color: var(--ink); font-weight: 500; }
.ti i { font-style: normal; }
.ti .up { color: var(--accent); }
.ti .dn { color: var(--sell); }
@media (prefers-reduced-motion: reduce) { .trk { animation: none; } .pip { animation: none; } }

/* ---------- terminal card treatment ---------- */
.card > h2 {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); padding: 11px 16px;
}
.card > h2 > span:first-child { color: var(--ink-2); }
.card > h2 .hint, .card > h2 .legend {
  font-family: Archivo, sans-serif; letter-spacing: 0; text-transform: none;
  font-size: 11.5px;
}
/* Card head from the mockup: bold 17.5px title with an 11.5px grey subtitle
   under it, extras (links, chips, scales) on the right. This lives here and
   not in desk.css because the company and hub pages use it too and only the
   dashboard loads desk.css. */
.chead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 17px 21px 13px;
}
.chead .ct1 { font-weight: 700; font-size: 17.5px; letter-spacing: -.015em; }
.chead .ct2 { font-size: 11.5px; color: #666E76; margin-top: 2px; }
.chead .ct2 .amp { color: #41474E; }
.chead .hint { font-size: 12px; }
.cfoot { padding: 12px 21px; font-family: "JetBrains Mono", monospace;
         font-size: 9.5px; color: #535B63; border-top: 1px solid #101317; }

/* the faint engineering grid the mockup uses behind hero surfaces */
.gridbg { position: relative; overflow: hidden;
          background: linear-gradient(150deg, #0F1319, #08090C 66%); }
.gridbg::before {
  content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image: linear-gradient(#171C22 1px, transparent 1px),
                    linear-gradient(90deg, #171C22 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(150deg, #000, transparent 70%);
          mask-image: linear-gradient(150deg, #000, transparent 70%);
}
.gridbg > * { position: relative; }
.badge {
  font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px);
  letter-spacing: .12em; display: inline-flex; align-items: center;
  color: var(--on-accent); background: var(--accent); padding: 4px 8px; border-radius: 4px;
}
.tag {
  font-family: "JetBrains Mono", monospace; font-size: var(--fs-micro, 10.5px); letter-spacing: .06em;
  padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border);
  color: var(--ink-2); background: rgba(255,255,255,.03);
}

/* the hero on a company page: big serif ticker over the engineering grid */
.hero { padding: 22px 20px 18px; margin-bottom: 12px; border: 1px solid var(--border);
        border-radius: var(--r-card); }
.hero .htop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero h1 { font-size: 46px; line-height: .92; margin: 14px 0 0; }
.hero .co { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 860px) { .hero h1 { font-size: 34px; } }

/* ---------- phone: rail becomes a bottom bar ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .rail { display: none; }
  .shell { padding: 0 14px 96px; }
  .hdr { margin: 0 -14px 12px; }
  .hbar { padding: 10px 14px; gap: 10px; }
  .ttl { font-size: 17px; }
  .cmdk, .livem { display: none; }
  .trk { padding-left: 14px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(7,8,10,.94); backdrop-filter: blur(16px);
    border-top: 1px solid #16191D; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .tb {
    flex: 1; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; border-radius: 12px;
    text-decoration: none; color: #5E666E; font-size: 9.5px; font-weight: 600;
  }
  .tb .g { font-size: 17px; line-height: 1; }
  .tb.on { color: var(--accent); background: rgba(198,242,78,.10); }
}

/* secondary nav on the dashboard: the rail picks the product area, this picks
   the section within it */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.subnav .tab { font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Phone menu and account sheet. Checkbox toggles, no script: the
   server-rendered pages ship no JavaScript, and a menu that needs a bundle to
   open is a menu that is broken on a slow connection.
   --------------------------------------------------------------------------- */
.tog { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.mmark, .mbtn { display: none; }

.scrim {
  position: fixed; inset: 0; z-index: 78; background: rgba(4,5,7,.72);
  backdrop-filter: blur(4px); opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
#navtog:checked ~ .scrim.nav, #acctog:checked ~ .scrim.acc {
  opacity: 1; pointer-events: auto;
}

/* Opens from the left, because that is where the burger that opens it sits.
   A panel that flies in from the opposite edge to the control you pressed
   reads as a different surface appearing, not as that button expanding. */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw); z-index: 80;
  background: #0A0B0E; border-right: 1px solid #1D2126;
  transform: translateX(-101%); transition: transform .22s ease;
  display: flex; flex-direction: column; overflow-y: auto;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
#navtog:checked ~ .drawer { transform: none; }

.accsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #0A0B0E; border-top: 1px solid #1D2126;
  border-radius: 18px 18px 0 0; transform: translateY(101%);
  transition: transform .22s ease;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#acctog:checked ~ .accsheet { transform: none; }

.dhead { display: flex; align-items: center; gap: 10px; padding: 15px 16px 13px;
         border-bottom: 1px solid #14181C; }
.dmark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent);
         color: var(--on-accent); display: flex; align-items: center;
         justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.dttl { font-family: "JetBrains Mono", monospace; font-size: 9.5px;
        letter-spacing: .2em; color: var(--ink-3); flex: 1; }
.dx { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--ink-3);
      cursor: pointer; padding: 4px 8px; margin: -4px -8px 0 0; }
.dx:hover { color: var(--ink); }

.dl { display: flex; align-items: center; gap: 13px; min-height: 50px;
      padding: 0 16px; text-decoration: none; color: var(--ink-2);
      font-size: 14px; font-weight: 600; border-bottom: 1px solid #101317; }
.dl .g { font-size: 17px; width: 20px; text-align: center; color: var(--ink-3); }
.dl:active, .dl:hover { background: #12161A; color: var(--ink); }
.dl.on { color: var(--accent); background: rgba(198,242,78,.08); }
.dl.on .g { color: var(--accent); }
.dfoot { margin-top: auto; padding: 16px; font-family: "JetBrains Mono", monospace;
         font-size: 8.5px; letter-spacing: .12em; color: #41474E; line-height: 1.7; }

/* the account sheet reuses whatever the header would show, laid out as full
   width rows so a thumb can hit them */
.accbody { display: flex; flex-direction: column; gap: 9px; padding: 16px; }
.accbody a, .accbody .tab {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  border-radius: 11px; text-decoration: none; font-size: 14px; font-weight: 600;
  border: 1px solid #2A3037; color: var(--ink-2); padding: 0 14px;
}
.accbody a:first-child, .accbody .signin {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.accbody .who {
  justify-content: flex-start; border: 0; color: var(--ink-3); min-height: 0;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em;
  max-width: none;
}
.accnote { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; text-align: center; }

@media (max-width: 860px) {
  .mmark {
    display: flex; width: 28px; height: 28px; border-radius: 9px; flex: none;
    background: var(--accent); color: var(--on-accent); align-items: center;
    justify-content: center; font-weight: 800; font-size: 14px; text-decoration: none;
  }
  .mbtn {
    display: flex; width: 36px; height: 36px; flex: none; align-items: center;
    justify-content: center; border: 1px solid #232930; border-radius: 10px;
    background: transparent; color: var(--ink-2); cursor: pointer;
    font-family: "JetBrains Mono", monospace; font-size: 14px; padding: 0;
  }
  .acct { display: none; }
  /* burger hard left, mark centred, the two actions right. `order` does this
     without a second copy of the markup, so tab order stays sensible. */
  /* wrap is what lets the title drop to its own line; without it the 100%
     basis below just shrinks and everything stays on one crowded row */
  .hbar { gap: 8px; padding: 10px 14px; flex-wrap: wrap; }
  .mbtn.burger { order: 1; margin-right: auto; }
  .mmark      { order: 2; }
  .htitle     { order: 3; }
  .mbtn.search { order: 4; margin-left: auto; }
  .mbtn.person { order: 5; }
  /* the mark is the centre mass, so the title moves under it as a thin strip
     rather than fighting it for the same row */
  .htitle { flex: 1 0 100%; order: 6; margin-top: 8px; }
  .htitle .kicker { font-size: 8.5px; }
  .ttl { font-size: 16px; }
}