/* ===========================================================================
   Hub360D console skin.

   Loaded after field.css, console pages only. The accent is the Hub360D
   olive (#79752f, 4.77:1 on white — clears 4.5:1 for button text), and the
   neutrals are re-biased from the dashboard's cool blue-grey toward warm
   olive so the accent looks chosen rather than pasted on. Every component
   already reads these tokens, so nothing below this block changes.

   The live dashboard keeps its petrol theme on purpose: admin and live-ops
   are different rooms, and the colour tells you which one you are in.
   =========================================================================== */
:root{
  --accent:#79752F;
  --accent-2:#8A8641;
  --accent-soft:#F0EFE0;
  --accent-ink:#FFFFFF;

  --ground:#F4F3EC;
  --panel-2:#FAF9F3;
  --panel-3:#F0EFE4;
  --rule:#E2E0D0;
  --rule-2:#EEECDF;
  --track:#EDEBDD;
  --axis:#CBC8B2;
}


/* ===========================================================================
   Admin console.

   Shares the dashboard's token set (field.css) and adds only what a
   form-and-table console needs on top. Loading field.css first is deliberate:
   one palette, one type scale, so moving between the console and the live
   dashboard does not feel like moving between two products.
   =========================================================================== */

/* ---------------------------------------------------------------- shell */
.adm{ display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }

.adm-rail{
  background:var(--panel); border-right:1px solid var(--rule);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}

.adm-brand{
  padding:16px; border-bottom:1px solid var(--rule);
  display:flex; gap:10px; align-items:flex-start;
}
.adm-logo{ display:block; height:36px; width:auto; margin-bottom:4px; }
.adm-name{ font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:14.5px; line-height:1.15; }
.adm-sub{ font-size:10.5px; color:var(--ink-3); margin-top:1px; }

.adm-nav{ padding:10px 8px; display:flex; flex-direction:column; gap:1px; }
.adm-group{
  padding:14px 8px 5px; font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.adm-link{
  display:flex; align-items:center; gap:9px; padding:8px;
  border-radius:var(--r); color:var(--ink-2); text-decoration:none;
  font-size:13px; position:relative;
}
.adm-link:hover{ background:var(--panel-3); color:var(--ink); }
.adm-link.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.adm-link.on::before{
  content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:2px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.adm-link svg{ width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.adm-count{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); }

/* Superseded by .user-foot in field.css, which both shells share. */
.adm-avatar{
  width:30px;height:30px;border-radius:4px;flex:none;background:var(--accent-soft);
  color:var(--accent); display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
}
.adm-uname{ font-size:12.5px; font-weight:600; line-height:1.2; }
.adm-urole{ font-size:10.5px; color:var(--ink-3); }

/* ---------------------------------------------------------------- main */
.adm-main{ min-width:0; display:flex; flex-direction:column; }

.adm-top{
  position:sticky; top:0; z-index:20; background:var(--panel);
  border-bottom:1px solid var(--rule); padding:12px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.adm-crumb{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3); min-width:0; }
.adm-crumb a{ color:var(--ink-2); text-decoration:none; }
.adm-crumb a:hover{ color:var(--accent); text-decoration:none; }
.adm-crumb b{ color:var(--ink); font-weight:600; }
.adm-crumb svg{ width:13px;height:13px;stroke:var(--ink-3);fill:none;stroke-width:1.6;flex:none; }
.adm-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.adm-body{ padding:22px; }
.adm-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.adm-title{ font-size:22px; letter-spacing:-.01em; }
.adm-desc{ color:var(--ink-2); font-size:13px; margin-top:4px; max-width:70ch; }

/* ---------------------------------------------------------------- cards */
.adm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }

.adm-card{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:16px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-1);
}
a.adm-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-2); }
.adm-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.adm-card-title{ font-size:15px; font-weight:600; line-height:1.3; }
.adm-card-sub{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.adm-card-stats{ display:flex; gap:18px; flex-wrap:wrap; padding-top:4px; border-top:1px solid var(--rule-2); }
.adm-stat-k{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; display:block; }
.adm-stat-v{ font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:500; }

.adm-empty{
  border:1px dashed var(--axis); border-radius:var(--r-lg); padding:44px 24px;
  text-align:center; color:var(--ink-2); background:var(--panel-2);
}
.adm-empty h3{ font-size:16px; margin-bottom:6px; color:var(--ink); }
.adm-empty p{ font-size:13px; max-width:48ch; margin:0 auto 16px; }

/* ---------------------------------------------------------------- forms */
.adm-form{ background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg); }
.adm-fieldset{ padding:18px; border-bottom:1px solid var(--rule-2); }
.adm-fieldset:last-of-type{ border-bottom:0; }
.adm-legend{
  font-family:"IBM Plex Sans Condensed",sans-serif; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:14px;
}
.adm-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.adm-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.adm-field.wide{ grid-column:1/-1; }
.adm-label{ font-size:12.5px; font-weight:500; color:var(--ink-2); }
.adm-label .req{ color:var(--critical); margin-left:2px; }
.adm-hint{ font-size:11.5px; color:var(--ink-3); line-height:1.45; }

.adm-input, .adm-select, .adm-textarea{
  width:100%; padding:9px 11px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--panel); color:var(--ink); font:inherit; font-size:13.5px;
}
.adm-input:focus, .adm-select:focus, .adm-textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.adm-textarea{ resize:vertical; min-height:76px; line-height:1.6; }
.adm-input.mono{ font-family:"IBM Plex Mono",monospace; }
.adm-input[aria-invalid="true"], .adm-select[aria-invalid="true"]{ border-color:var(--critical); }

.adm-err{ font-size:11.5px; color:var(--critical-ink); }

.adm-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; cursor:pointer; }
.adm-check input{ width:17px;height:17px;margin-top:1px;accent-color:var(--accent);flex:none; }

.adm-foot{
  padding:14px 18px; border-top:1px solid var(--rule); background:var(--panel-2);
  display:flex; gap:9px; align-items:center; border-radius:0 0 var(--r-lg) var(--r-lg);
}
.adm-foot .spacer{ margin-left:auto; }

/* ---------------------------------------------------------------- table */
.adm-table-wrap{ background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.adm-table-wrap .scroll{ overflow-x:auto; }
.adm-table-head{
  padding:12px 16px; border-bottom:1px solid var(--rule-2);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* ---------------------------------------------------------------- misc */
.adm-flash{
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px; margin-bottom:16px;
  border-radius:var(--r); border-left:3px solid var(--good); background:var(--good-wash);
  color:var(--good-ink); font-size:13px;
}
.adm-flash.warn{ border-left-color:var(--warning); background:var(--warning-wash); color:var(--warning-ink); }
.adm-flash.err{ border-left-color:var(--critical); background:var(--critical-wash); color:var(--critical-ink); }
.adm-flash svg{ width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.7; }

.adm-pill{
  font-family:"IBM Plex Mono",monospace; font-size:10px; padding:2px 7px; border-radius:3px;
  background:var(--panel-3); color:var(--ink-2); white-space:nowrap;
}
.adm-pill.live{ background:var(--good-wash); color:var(--good-ink); }
.adm-pill.planned{ background:var(--accent-soft); color:var(--accent); }
.adm-pill.closed{ background:var(--panel-3); color:var(--ink-3); }

/* ------------------------------------------------------------ builder */
.qb{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.qb-list{ display:flex; flex-direction:column; gap:8px; }

.qb-item{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:12px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start;
}
.qb-item.dragging{ opacity:.5; }
.qb-item.over{ border-color:var(--accent); box-shadow:0 -2px 0 var(--accent); }
.qb-handle{
  cursor:grab; color:var(--ink-3); padding:2px; line-height:0; background:none; border:0;
}
.qb-handle:active{ cursor:grabbing; }
.qb-handle svg{ width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8; }
.qb-code{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); font-weight:600; }
.qb-text{ font-size:13.5px; font-weight:500; line-height:1.4; margin-top:2px; }
.qb-meta{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; align-items:center; }
.qb-ops{ display:flex; gap:4px; }
.qb-op{
  border:1px solid var(--rule); background:var(--panel); border-radius:var(--r);
  padding:5px 8px; cursor:pointer; color:var(--ink-2); font-size:11.5px; text-decoration:none;
}
.qb-op:hover{ border-color:var(--axis); color:var(--ink); }
.qb-op.danger:hover{ border-color:var(--critical); color:var(--critical-ink); }

.qb-side{ position:sticky; top:78px; display:flex; flex-direction:column; gap:14px; }

.qb-opts{ display:flex; flex-direction:column; gap:7px; }
/* grip | key | label | score | other | remove */
.qb-opt{ display:grid; grid-template-columns:22px 120px minmax(0,1fr) 74px auto auto; gap:8px; align-items:center; }
.qb-other{
  display:flex; align-items:center; gap:4px; font-size:10px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em; cursor:pointer; user-select:none;
}
.qb-other input{ margin:0; cursor:pointer; }
.qb-other:has(input:checked){ color:var(--accent); font-weight:600; }
/* Columns and matrix rows have no "other" concept, so their grids stay
   one narrower than the option grid. */
#colList .qb-opt{ grid-template-columns:22px 120px minmax(0,1fr) 74px auto; }
.qb-opt input{ padding:7px 9px; font-size:12.5px; }
.qb-remove{
  border:1px solid var(--rule); background:var(--panel); border-radius:var(--r);
  width:30px;height:30px;cursor:pointer;color:var(--ink-3);line-height:0;display:grid;place-items:center;
}
.qb-remove:hover{ border-color:var(--critical); color:var(--critical-ink); }
.qb-remove svg{ width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8; }

.qb-rows{ display:flex; flex-direction:column; gap:7px; }
/* grip | label | remove */
.qb-row{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; }

/* ---- reordering controls -------------------------------------------- */

/* The grip is the drag target. It is tabindex="-1" on purpose: the arrow
   buttons beside it already give a keyboard route, and a focus stop that
   does nothing when you press it is worse than no focus stop. */
.qb-grip{
  border:0; background:none; padding:0; width:22px; height:30px;
  cursor:grab; color:var(--ink-3); line-height:0;
  display:grid; place-items:center;
}
.qb-grip:active{ cursor:grabbing; }
/* It is focusable and carries the arrow keys, so it must show focus. */
.qb-grip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.qb-grip:disabled{ cursor:not-allowed; opacity:.35; }
.qb-grip svg{
  width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round;
}
.qb-opt:hover .qb-grip, .qb-row:hover .qb-grip{ color:var(--ink-2); }

/* The row being dragged stays visible but recedes, so the gap it will land
   in is the thing the eye follows rather than the row itself. */
.qb-opt.dragging, .qb-row.dragging{ opacity:.4; }

@media (max-width: 720px){
  /* The score column is the first thing to go: it is optional, and a
     three-column grid on a phone leaves no room to read the label. */
  .qb-opt{ grid-template-columns:22px minmax(0,1fr) auto auto; }
  .qb-opt input.mono:last-of-type{ display:none; }
  #colList .qb-opt{ grid-template-columns:22px minmax(0,1fr) auto; }
}

/* live preview of the widget the surveyor will see */
.qb-preview{ background:var(--panel-2); border:1px solid var(--rule); border-radius:var(--r); padding:14px; }
.qb-preview-q{ font-size:14px; font-weight:600; margin-bottom:10px; line-height:1.35; }
.qb-stars{ display:flex; gap:4px; justify-content:center; }
.qb-star svg{ width:26px;height:26px;fill:var(--rule); }
.qb-star.on svg{ fill:var(--warning); }
.qb-prevopt{
  padding:9px 11px; border:1.5px solid var(--rule); border-radius:6px;
  font-size:12.5px; margin-bottom:6px; background:var(--panel);
}
.qb-prevslider{ width:100%; accent-color:var(--accent); }

.adm-locked{
  border:1px solid var(--rule); border-left:3px solid var(--warning);
  background:var(--warning-wash); color:var(--warning-ink);
  border-radius:var(--r); padding:11px 13px; font-size:12.5px; line-height:1.55;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  .qb{ grid-template-columns:1fr; }
  .qb-side{ position:static; }
}
@media (max-width:860px){
  .adm{ grid-template-columns:1fr; }
  .adm-rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); }
  .adm-nav{ flex-direction:row; flex-wrap:wrap; }
  .adm-group{ display:none; }
  .adm-body{ padding:16px 14px 40px; }
  .adm-top{ padding:12px 14px; }
  .qb-opt{ grid-template-columns:1fr; }
}


/* ---------------- logic builder ---------------- */
.qb-cond{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:8px; align-items:center;
}
.qb-cond .adm-select, .qb-cond .adm-input{ padding:7px 9px; font-size:12.5px; }

@media (max-width:900px){
  .qb-cond{ grid-template-columns:1fr; }
}

/* ===========================================================================
   Hub360D skin — component-level text steps.

   At the END of the file on purpose: these tie on specificity with the rules
   above, so source order is the mechanism. The accent clears 4.5:1 on white
   but not on its own soft tint; text sitting ON the tint takes a darker step
   of the same olive (5.8:1). Fills, rails and buttons keep the true brand
   value.
   =========================================================================== */
.adm-link.on{ color:#615D26; }
.tag.ai{ color:#615D26; }
a{ color:#615D26; text-decoration:none; }
a:hover{ text-decoration:none; }


/* Reorder feedback on the question list. Immediate-save needs immediate
   confirmation: without it a failed write is indistinguishable from a
   successful one until someone reloads and finds their order gone. */
.qb-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,14px);
  padding:10px 16px; border-radius:var(--r); font-size:13px; font-weight:500;
  background:var(--good-wash); color:var(--good-ink); border:1px solid var(--good);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:60;
  max-width:min(520px,92vw); text-align:center;
}
.qb-toast.err{ background:var(--critical-wash); color:var(--critical-ink); border-color:var(--critical); }
.qb-toast.show{ opacity:1; transform:translate(-50%,0); }