/* Fusinite Standards admin: sidebar app on the portal's Lens palette (style.css tokens only; no new colours).
   Layout: fixed sidebar (sections + counts of what waits) | one working column. Phone: the sidebar becomes a top bar
   with a horizontally scrolling section list. Inline style attributes are blocked by the security policy: use classes. */
body.admin { background: var(--parchment); }
body.admin section { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }

.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
         /* the sidebar's paper colour runs the full height of long pages */
         background: linear-gradient(to right, var(--paper) 231px, var(--stone-line) 231px, var(--stone-line) 232px, transparent 232px); }
.side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 18px;
        padding: 18px 14px; background: var(--paper); border-top: 3px solid var(--forest); }
.brand { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--heading); }
.logo-chip { display: inline-flex; padding: 6px 8px; border-radius: var(--radius-sm); background: #fffdf8; width: fit-content; }
.logo-chip img { display: block; height: 40px; width: auto; }
.brand-text { font: 600 15px var(--font-display); letter-spacing: -0.2px; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px;
         border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 15px var(--font-body); }
#nav a:hover { background: var(--forest-mist); }
#nav a[aria-current="page"] { background: var(--forest-mist); color: var(--heading); font-weight: 700;
                              box-shadow: inset 3px 0 0 var(--forest); }
.count:empty { display: none; }
.count { min-width: 22px; padding: 1px 7px; border-radius: 11px; background: var(--amber-soft); color: var(--amber);
         border: 1px solid var(--amber); font: 600 12px var(--font-mono); text-align: center; font-variant-numeric: tabular-nums; }
.side-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.staff-tag { font: 500 11px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--brass-deep);
             border: 1px solid var(--brass); background: var(--brass-pale); border-radius: 10px; padding: 1px 9px; }

.content { padding: 28px 32px 64px; min-width: 0; max-width: 1180px; }
.content h1 { font-size: 26px; margin: 0 0 4px; text-wrap: balance; }
.lead { color: var(--ink-soft); margin: 0 0 22px; max-width: 70ch; }
.panel { background: var(--paper); border: 1px solid var(--stone-line); border-radius: var(--radius-md);
         padding: 20px 22px; box-shadow: var(--shadow-soft); margin-bottom: 18px; min-width: 0; }
.panel.narrow { max-width: 520px; }
.panel h2 { margin: 0 0 10px; font-size: 17px; }
.panel h3 { margin: 18px 0 8px; font-size: 15px; }
.panel > p { max-width: 75ch; }
.hint { font-size: 14px; color: var(--stone); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > input, .row > select { width: auto; flex: 1 1 220px; margin: 0; }
select { padding: 9px 10px; font: 15px var(--font-body); color: var(--ink); background: var(--paper);
         border: 1.5px solid var(--stone-line); border-radius: var(--radius-sm); }
textarea { width: 100%; min-height: 70px; padding: 10px 12px; font: 15px var(--font-body); color: var(--ink);
           background: var(--paper); border: 1.5px solid var(--stone-line); border-radius: var(--radius-sm); }
.tablewrap { overflow-x: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--font-mono); font-size: 13px; }
td.actions { white-space: nowrap; text-align: right; }
td.actions button + button { margin-left: 6px; }
button.small { padding: 5px 11px; font-size: 13.5px; }
.tag.ok { background: var(--forest-mist); color: var(--heading); border-color: var(--forest); }
.tag.warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.tag.bad { background: var(--clay-soft); color: var(--clay); border-color: var(--clay); }
.tag.test { background: var(--stone-light); color: var(--stone); }

/* Overview */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--paper); border: 1px solid var(--stone-line); border-radius: var(--radius-md); padding: 14px 16px; }
.stat b { display: block; font: 600 28px var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--stone); }
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
           border: 1px solid var(--stone-line); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); background: var(--paper); }
.todo li.done { border-left-color: var(--forest); color: var(--stone); }
.todo a { font-weight: 600; white-space: nowrap; }

/* Metric picker */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.combo { position: relative; }
.combo-list { margin-top: 6px; max-height: 460px; overflow: auto; border: 1px solid var(--stone-line); border-radius: var(--radius-sm);
              background: var(--paper); }
.combo-group { padding: 8px 12px 4px; font: 600 11px var(--font-mono); letter-spacing: 1px; text-transform: uppercase;
               color: var(--brass-deep); background: var(--stone-light); position: sticky; top: 0; }
.combo-opt { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.combo-opt:hover, .combo-opt:focus-visible { background: var(--forest-mist); outline: 0; }
.combo-opt[aria-selected="true"] { font-weight: 600; color: var(--heading); }
.combo-opt .tick { width: 16px; height: 16px; border: 1.5px solid var(--stone-line); border-radius: 4px; flex: none;
                   display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.combo-opt[aria-selected="true"] .tick { background: var(--forest); border-color: var(--forest); color: #fffdf8; }
.selected-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.sel { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px;
       border: 1px solid var(--stone-line); border-radius: var(--radius-sm); background: var(--paper); }
.sel .pos { font: 600 12px var(--font-mono); color: var(--stone); text-align: right; font-variant-numeric: tabular-nums; }
.sel input { margin: 0; padding: 7px 9px; font-size: 14.5px; }
.sel small { display: block; margin-top: 3px; color: var(--stone); font-size: 12px; overflow-wrap: anywhere; }
.sel .moves { display: flex; gap: 4px; }
.sel .moves button { padding: 3px 8px; font-size: 13px; }
.missing { border-color: var(--clay); background: var(--clay-soft); }

/* Sharing */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.choices label { margin: 0; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--stone-line);
                 border-radius: var(--radius-sm); font: 500 14px var(--font-body); color: var(--ink); letter-spacing: 0; }
.choices input { width: auto; margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }

/* Activity */
.details { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; max-width: 520px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; background: none; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; }
  .brand { flex-direction: row; align-items: center; }
  .logo-chip img { height: 30px; }
  #nav { order: 3; flex-direction: row; width: 100%; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  #nav a { white-space: nowrap; padding: 7px 10px; }
  .side-foot { margin: 0 0 0 auto; }
  .staff-tag { display: none; }
  .content { padding: 18px 16px 48px; }
  .picker { grid-template-columns: 1fr; }
}

#nav a.switch { margin-top: 10px; border: 1px dashed var(--brass); color: var(--brass-deep); font-size: 14px; }
.sf-qr { image-rendering: pixelated; width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: 6px; }
.grid2 .wide-field { grid-column: 1 / -1; }
.grid2 select { display: block; width: 100%; margin-top: 5px; }
/* Standards that can't receive this sample (047): greyed out, with the reason. */
.choices label.unavailable { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; opacity: .62;
                             cursor: not-allowed; background: var(--parchment); }
.choices label.unavailable input { margin-top: 3px; }
.choices label.unavailable .why { grid-column: 2; font-size: 13px; color: var(--stone); }
/* File access warnings (048). */
.warnbox { border-color: var(--clay); background: var(--clay-soft); }
.warnbox h2 { color: var(--clay); }
.small-link { font-size: 12.5px; margin-left: 4px; }
.files-default { margin-bottom: 10px; }