/* ══════════════════════════════════════════════════════════════════
   FIRECLOUDS ONE — APPLE-STYLE THEME
   Loaded LAST, so it re-skins the console without touching its
   structure. The Jira layout you like is untouched: same grid, same
   sidebar, same tables. What changes is the palette, the typography,
   the corners, the shadows and the motion.

   WHY IT LOOKS CALMER
     · Apple's greys, not Atlassian's blues. Text is near-black
       (#1d1d1f) on white or #f5f5f7 — lower contrast than #091E42 on
       #FFF, which is what makes a screen tiring after an hour.
     · Borders retreat. Apple separates with tone and space rather than
       lines, so most 1px borders become fainter or disappear.
     · Corners go from 3px to 10px. Nothing else changes size.
     · Motion uses Apple's easing curve and slightly longer durations,
       so things settle rather than snap.

   Every animation here is decoration and is switched off under
   prefers-reduced-motion, which console.css already declares globally.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── greys: Apple's neutral ramp ───────────────────────────────── */
  --n0:#FFFFFF;     /* surfaces */
  --n10:#F5F5F7;    /* the grey Apple uses behind cards */
  --n20:#EEEEF0;    /* hover fills, zebra rows */
  --n30:#D2D2D7;    /* separators */
  --n40:#B8B8BE;    /* disabled, faint icons */
  --n200:#86868B;   /* tertiary text */
  --n300:#6E6E73;   /* secondary text */
  --n400:#515154;   /* body text on light surfaces */
  --n800:#1D1D1F;   /* primary text — near-black, never pure */
  --n900:#000000;   /* headings only */

  /* ── accent: Apple blue ────────────────────────────────────────── */
  --b50:#EAF3FE;
  --b75:#CFE3FB;
  --b400:#0071E3;   /* buttons, active nav */
  --b500:#0066CC;   /* links, hover */
  --b700:#004A99;

  /* ── semantic ──────────────────────────────────────────────────── */
  --g400:#34C759; --g500:#248A3D;
  --r400:#FF453A; --r500:#D70015;
  --y400:#FFCC00;
  --o400:#FF9500;
  --p500:#AF52DE;

  /* ── shape + depth ─────────────────────────────────────────────── */
  --radius:10px;
  --radius-sm:7px;
  --radius-lg:16px;
  /* Apple shadows are wide, soft and nearly colourless. */
  --shadow-raised:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.05);
  --shadow-overlay:0 8px 28px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
  --shadow-lift:0 6px 20px rgba(0,0,0,.09);

  /* ── motion ────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.25,.1,.25,1);       /* Apple's default curve */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* for things entering */
  --t-fast:.18s; --t:.28s; --t-slow:.42s;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

/* ── typography ────────────────────────────────────────────────────
   Apple's type is tightly tracked and slightly heavier at large sizes.
   The body size is unchanged so nothing reflows. */
body{
  color:var(--n800);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,.page-title,.g-title{letter-spacing:-.022em;color:var(--n900)}
h1,.page-title{font-weight:600}
.breadcrumbs{letter-spacing:-.01em;color:var(--n200)}
a{color:var(--b500)}
a:hover{color:var(--b400);text-decoration:none;opacity:.75}
.sub,.hint,.meta-line{color:var(--n300);letter-spacing:-.005em}

/* ── buttons ───────────────────────────────────────────────────────
   Apple buttons are soft rectangles that depress slightly. No borders
   on the primary, no hard 1px edges anywhere. */
.btn{
  border-radius:var(--radius-sm);
  font-weight:500;
  letter-spacing:-.01em;
  background:rgba(0,0,0,.05);
  color:var(--n800);
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn:hover{background:rgba(0,0,0,.08)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--b400);color:#fff;box-shadow:0 1px 2px rgba(0,113,227,.25)}
.btn.primary:hover{background:#0077ED;box-shadow:0 2px 8px rgba(0,113,227,.3)}
.btn.subtle{background:transparent}
.btn.subtle:hover{background:rgba(0,0,0,.05)}
.btn:disabled{opacity:.38;transform:none}
.btn.sm{border-radius:6px}

/* ── inputs ────────────────────────────────────────────────────────
   A single faint border, a soft blue ring on focus — no inset shadow. */
input,select,textarea{
  border-radius:var(--radius-sm)!important;
  border-color:var(--n30);
  color:var(--n800);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
input:focus,select:focus,textarea:focus,
.gn-search:focus-within{
  border-color:var(--b400)!important;
  box-shadow:0 0 0 3.5px rgba(0,113,227,.16)!important;
  outline:none!important;
}
:focus-visible{outline:2px solid var(--b400);outline-offset:3px;border-radius:4px}

/* ── surfaces ──────────────────────────────────────────────────────
   Cards lose their hard border and gain a soft shadow instead. This is
   the single biggest change in feel. */
.card,.gadget{
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.gadget:hover{box-shadow:var(--shadow-lift)}
.g-header{border-bottom:1px solid rgba(0,0,0,.06)}
.stat-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}

/* ── top bar ───────────────────────────────────────────────────────
   Apple's chrome is translucent and blurred, sitting over content. */
/* The bar is .global-nav — an earlier draft targeted .gn, which is only a
   prefix on its children, so the blur never applied. */
.global-nav{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.gn-logo{border-radius:var(--radius-sm);transition:background var(--t-fast) var(--ease)}
.gn-logo .word{letter-spacing:-.022em;font-weight:600}
.gn-env{border-radius:5px;letter-spacing:.02em;font-weight:600}
.gn-search{border-radius:var(--radius-sm);border-color:var(--n30);
  transition:width var(--t) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.gn-avatar{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.gn-avatar:hover{transform:scale(1.06);box-shadow:0 0 0 3px rgba(0,113,227,.18)}

/* ── sidebar ───────────────────────────────────────────────────────
   NOTE: the real classes here are .side-item / .side-group. An earlier
   draft of this file styled .nav-item / .nav-group, which do not exist
   in this console, so none of it applied.

   App Store Connect's sidebar is WHITE, separated from the content by a
   hairline rather than a change of tone. Ours was grey (#F5F5F7), which
   is the most obvious difference between the two screenshots. */
.sidebar{background:var(--n0);border-right:1px solid rgba(0,0,0,.08)}
/* Apple sets navigation text at FULL strength — App Store Connect's
   "App Information", "App Review" are near-black, not grey. Grey is
   reserved for captions and secondary detail. Ours were grey (#515154),
   which is the reason the two screenshots feel different even where the
   layout matches. */
.side-item{
  border-radius:6px;
  color:var(--n800);
  font-weight:400;
  letter-spacing:-.012em;
  padding:8px 10px;
  line-height:1.3;
  /* box-shadow rather than border: an outline that appears on selection
     would shift every other row by 1px as you click around. */
  box-shadow:0 0 0 1px transparent inset;
  transition:color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}

/* HOVER — App Store Connect turns the TEXT blue and leaves the row
   alone. No grey fill: the fill is reserved for what is selected, so
   the two states can never be confused. ("App Accessibility" in the
   reference screenshot is a hover, not a selection.) */
.side-item:hover{background:transparent;color:var(--b500)}
.side-item:hover svg{color:var(--b500)}

/* SELECTED — a soft grey fill inside a thin blue outline, with the text
   left BLACK. Apple marks the current page by enclosing it, not by
   colouring it; colour means "this is a link you can follow". */
.side-item.active,
.side-item.active:hover{
  background:var(--n10);
  color:var(--n800);
  font-weight:400;
  box-shadow:0 0 0 1px rgba(0,113,227,.55) inset;
}
.side-item.active svg,
.side-item.active:hover svg{color:var(--n400)}
.side-item.active::before{display:none}   /* the old 2px left bar */

.side-item svg{stroke-width:1.6;color:var(--n300);transition:color var(--t-fast) var(--ease)}

/* Collapsible group headers follow the same rule — blue on hover, never
   a grey fill. */
.side-group.collapsible:hover{background:transparent;color:var(--b500)}
.side-group.collapsible:hover .sg-chev{color:var(--b500)}

/* ── sidebar rhythm ────────────────────────────────────────────────
   App Store Connect gives each section real breathing room and draws a
   hairline between the major ones, so the eye can find a group without
   reading it. Ours ran the sections together with only 14px of padding.
   The divider is on the GROUP, drawn above it, so the first one in the
   list does not get a stray line. */
.side-scroll{padding:10px 10px 20px}
.side-group{
  font-size:11px;
  font-weight:600;
  color:var(--n200);
  letter-spacing:.055em;
  padding:8px 10px 6px;
  margin-top:22px;
  border-top:1px solid rgba(0,0,0,.07);
  padding-top:18px;
}
.side-scroll > *:first-child .side-group,
.side-scroll > .side-group:first-child{
  margin-top:2px;border-top:none;padding-top:6px;
}
.side-group.collapsible{
  font-size:14px;
  font-weight:600;
  color:var(--n800);
  letter-spacing:-.015em;
  border-radius:var(--radius-sm);
  margin-top:22px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.07);
}
.side-footer{border-top:1px solid rgba(0,0,0,.07);color:var(--n200);padding:12px 16px}

/* ── text weight everywhere else ───────────────────────────────────
   Field labels were grey at 600. Apple uses near-black at regular
   weight — the colour does the work, not the boldness. */
.field label{color:var(--n800);font-weight:400;font-size:13px;letter-spacing:-.01em}
.filterbar label,.side-toggle label{color:var(--n800)}
table.list td{color:var(--n800)}
.g-sub,.count-bar{color:var(--n300)}

/* ── page headings ─────────────────────────────────────────────────
   App Store Connect's page title ("iOS App Version 1.0") is about 28px
   at semibold — larger than ours was, but LIGHTER than a true bold.
   Apple almost never uses 700; 600 with tight tracking reads as
   confident without shouting. */
.page-title{font-size:28px;font-weight:600;letter-spacing:-.022em;color:var(--n900)}
.breadcrumbs{font-size:13px;color:var(--n200)}
.meta-line{font-size:13px;color:var(--n300)}
.tab{font-weight:500;letter-spacing:-.01em}
.tabbar{border-bottom:1px solid var(--n30)}
.tab.active{border-bottom-width:2px}
.g-title{font-size:15px;font-weight:600;letter-spacing:-.015em}
.wk-title,.stat-card .s-val{letter-spacing:-.02em}

/* ── tables ────────────────────────────────────────────────────────
   Lighter rules, roomier rows — closer to a Numbers sheet than a grid. */
table.list th{
  border-bottom:1px solid var(--n30);
  color:var(--n300);
  letter-spacing:.02em;
  font-weight:600;
  text-transform:none;
  font-size:12px;
}
table.list td{border-bottom:1px solid rgba(0,0,0,.05)}
table.list tbody tr{transition:background var(--t-fast) var(--ease)}
table.list tbody tr:hover{background:rgba(0,0,0,.025)}

/* ── lozenges ──────────────────────────────────────────────────────
   Apple pills are rounded and sentence case, not shouty caps. */
.lozenge{
  border-radius:20px;
  padding:3px 9px;
  font-weight:600;
  font-size:11px;
  text-transform:none;
  letter-spacing:-.005em;
}

/* ── modals ────────────────────────────────────────────────────────
   Bigger radius, a deeper but softer shadow, and a gentle scale-in. */
#modalBack{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#modalBack .modal{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay);
  border:none;
  animation:appleModalIn var(--t) var(--ease-out);
}
@keyframes appleModalIn{
  from{opacity:0;transform:scale(.97) translateY(8px)}
  to{opacity:1;transform:none}
}
.modal-x{border-radius:50%;border-color:rgba(0,0,0,.08);transition:all var(--t-fast) var(--ease)}
.modal-x:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);color:var(--n800);transform:rotate(90deg)}

/* ── toast ─────────────────────────────────────────────────────────── */
#toast{border-radius:var(--radius);box-shadow:var(--shadow-overlay);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);letter-spacing:-.01em}

/* ── page transitions ──────────────────────────────────────────────
   Content fades up as a route renders. Short enough not to be in the
   way when you are clicking quickly through pages. */
#content > *{animation:appleFadeUp var(--t) var(--ease-out)}
@keyframes appleFadeUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ── scrollbars ────────────────────────────────────────────────────
   Thin and only visible against content, as on macOS. */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32);background-clip:content-box}

/* ── the pieces built earlier, brought into line ───────────────────── */
.fzcal-wrap,.fzy-wrap,.fzcal-side,.wx-card,.bsky-banner,.bsky-card{
  border-color:rgba(0,0,0,.06);
  box-shadow:var(--shadow-raised);
}
.fzcal-dow{background:var(--n800)}
.fzcal-day{transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.fzcal-chip{border-radius:6px;transition:filter var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.fzcal-seg,.fzcal-arrow,.fzcal-lg,.fzy-tab,.bsky-card,.wx-metric{border-radius:var(--radius-sm)}
.fzcal-lg,.fzy-tab,.fzcal-rd{border-radius:20px}
.bsky-card{border-radius:var(--radius)}
.wx-d,.wx-h{border-radius:var(--radius-sm)}
.fzn{border-radius:var(--radius-sm)}
.fzn-badge{border-radius:6px}

/* ── mobile ────────────────────────────────────────────────────────
   Blur is expensive on low-end phones; fall back to a solid bar. */
@media (max-width:760px){
  .global-nav{background:rgba(255,255,255,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
  #modalBack{-webkit-backdrop-filter:none;backdrop-filter:none}
  #content > *{animation:none}
}