/* ============================================================================
   Studio — custom dashboard builder. Loads after markdown.css + para.css.
   Responsive 12-col grid (stacks on mobile); flat-glass to match the system.
   ============================================================================ */

/* ---- action bar (read + edit) ---- */
.std-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-5); }
.std-bar-l{ min-width:0; flex:1 1 auto; }
.std-bar-r{ display:flex; gap:var(--sp-2); flex:0 0 auto; }
.std-title{ font-size:1.5rem; font-weight:600; color:var(--ink); background:transparent;
  border:none; border-bottom:2px solid var(--sep-hi); padding:2px 0; width:100%; max-width:420px; }
.std-title:focus{ outline:none; border-bottom-color:var(--cat-property); }
.btn.danger.armed{ background:var(--risk); color:#fff; }

/* ---- AI build panel ---- */
.std-ai{ display:flex; gap:var(--sp-2); margin:0 0 var(--sp-5); }
.std-ai .field{ flex:1 1 auto; min-width:0; }
.std-ai .btn{ flex:0 0 auto; }

/* ---- the grid ---- */
.std-page{ display:flex; flex-direction:column; gap:var(--sp-6); }
.std-sec{ display:flex; flex-direction:column; gap:var(--sp-3); }
.std-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--sp-4); align-items:start; }
.std-col{ grid-column:span var(--span, 12); min-width:0; }
/* collapse at/above the 900px sidebar breakpoint so the 12-col grid never lays out inside the
   sidebar-narrowed content band (where thin columns would clip in the overflow:hidden panels) */
@media (max-width:1024px){ .std-col{ grid-column:span 6 !important; } }
@media (max-width:900px){ .std-col{ grid-column:span 12 !important; } }

/* ======================= WIDGETS ======================= */
.w-pad{ padding:var(--sp-4); }
.w-cap{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--sp-2); }

/* stat */
.w-stat{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1); }
.w-stat-n{ font-size:2rem; font-weight:600; line-height:1.05; overflow-wrap:anywhere; }
.w-stat-l{ font-size:.8rem; color:var(--ink-dim); }

/* gallery */
.w-gscroll{ display:flex; gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-2); scroll-snap-type:x mandatory; }
.w-gcard{ flex:0 0 168px; scroll-snap-align:start; cursor:pointer; }
.w-gimg{ height:108px; border-radius:var(--radius-sm); background:var(--pg-flat); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); margin-bottom:var(--sp-2); }
.w-gimg.w-gph svg{ width:26px; height:26px; }
.w-gnm{ font-size:.84rem; color:var(--ink); overflow-wrap:anywhere; }

/* bar */
.w-bars{ display:flex; flex-direction:column; gap:var(--sp-3); }
.w-bar{ display:grid; grid-template-columns:minmax(64px,90px) minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); }
.w-bar-k{ font-size:.8rem; color:var(--ink-dim); overflow-wrap:anywhere; }
.w-bar-track{ height:8px; border-radius:999px; background:var(--sep); overflow:hidden; }
.w-bar-fill{ height:100%; border-radius:999px; background:var(--cat-property); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.w-bar-v{ font-size:.8rem; font-weight:600; color:var(--ink); }

/* goal */
.w-goal-top{ display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.w-goal-cur{ font-size:1.6rem; font-weight:600; color:var(--ink); }
.w-goal-tg{ font-size:.82rem; color:var(--ink-dim); }

/* note + heading */
.w-note{ font-size:.92rem; line-height:1.55; color:var(--ink-dim); overflow-wrap:anywhere; }
.w-heading .w-h-t{ font-size:1.25rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.w-heading .w-h-s{ font-size:.86rem; color:var(--ink-dim); margin-top:2px; }
.w-spacer{ min-height:32px; }
.w-board{ overflow-x:auto; }

/* ======================= EDITOR ======================= */
.std-edit{ display:flex; flex-direction:column; gap:var(--sp-5); }
.std-empty{ color:var(--ink-faint); text-align:center; padding:var(--sp-6); }

.std-sec-edit{ border:1px dashed var(--sep-hi); border-radius:var(--radius-md); padding:var(--sp-3); }
.std-sec-bar{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.std-sec-acts, .std-sec-presets, .std-col-acts{ display:flex; gap:4px; flex:0 1 auto; flex-wrap:wrap; }
.std-sec-title{ flex:1 1 140px; min-width:0; background:transparent; border:none; border-bottom:1px solid var(--sep);
  color:var(--ink); font-size:.85rem; padding:4px 2px; }
.std-sec-title:focus{ outline:none; border-bottom-color:var(--cat-property); }
.std-sec-presets{ margin-left:auto; align-items:center; flex-wrap:wrap; }

.ic-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:8px; background:var(--pg-flat); color:var(--ink-dim); border:none; cursor:pointer; }
.ic-btn:hover{ color:var(--ink); }
.ic-btn:disabled{ opacity:.35; cursor:default; }
.ic-btn.danger:hover{ color:var(--risk); }
.ic-btn svg{ width:15px; height:15px; }
.preset-btn{ width:26px; height:26px; border-radius:7px; background:var(--pg-flat); color:var(--ink-dim);
  border:none; cursor:pointer; font-size:.8rem; font-weight:600; }
.preset-btn:hover{ color:var(--ink); }

.std-col-edit{ border:1px solid var(--sep); border-radius:var(--radius-sm); padding:6px; background:rgba(255,255,255,.012); }
.std-col-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:6px; flex-wrap:wrap; }
.std-col-tag{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--ink-faint); min-width:0; overflow-wrap:anywhere; }
.std-col-tag svg{ width:13px; height:13px; flex:0 0 auto; }
.std-col-preview{ pointer-events:none; }
.std-col-preview [data-open]{ cursor:default; }
.std-emptycol{ pointer-events:auto; width:100%; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:var(--sp-5); border:1px dashed var(--sep-hi); border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-dim); cursor:pointer; font-size:.84rem; }
.std-emptycol:hover{ color:var(--ink); border-color:var(--cat-property); }
.std-emptycol svg{ width:15px; height:15px; }

/* section-level Add-widget tray */
.std-addw{ margin-left:2px; }
.std-addw svg{ width:14px; height:14px; }
.std-sec-pick{ margin-top:var(--sp-3); border-top:1px dashed var(--sep); padding-top:var(--sp-3); }

/* config + picker trays */
.std-cfg{ margin-top:8px; border-top:1px dashed var(--sep); padding-top:8px; }
.std-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; }
.pick-w{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:9px;
  background:var(--pg-flat); color:var(--ink-dim); border:none; cursor:pointer; font-size:.72rem; }
.pick-w:hover{ color:var(--ink); }
.pick-w svg{ width:18px; height:18px; }
.std-form{ display:flex; flex-direction:column; gap:6px; }
.cfg-row{ display:flex; align-items:center; gap:var(--sp-2); font-size:.78rem; color:var(--ink-dim); }
.cfg-row.col{ flex-direction:column; align-items:stretch; }
.cfg-row span{ flex:0 0 78px; }
.cfg-row .field.sm{ flex:1 1 auto; min-width:0; }
.field.sm{ padding:5px 8px; font-size:.82rem; border-radius:8px; }
.cfg-actions{ display:flex; gap:6px; margin-top:4px; }

.std-addsec{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:var(--sp-3);
  border:1px dashed var(--sep-hi); border-radius:var(--radius-md); background:transparent; color:var(--ink-dim);
  cursor:pointer; font-size:.86rem; font-weight:500; }
.std-addsec:hover{ color:var(--ink); border-color:var(--cat-property); }
.std-addsec svg{ width:15px; height:15px; }

/* ======================= REVIEW + ACTIVITY ======================= */
.rev-row{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--sep); }
.rev-row:last-child{ border-bottom:none; }
.rev-ic{ flex:0 0 auto; color:var(--sig-partial); display:inline-flex; }
.rev-ic svg{ width:18px; height:18px; }
.rev-tx{ flex:1 1 auto; min-width:0; }
.rev-nm{ font-size:.92rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.rev-bd{ font-size:.82rem; color:var(--ink-dim); margin-top:1px; overflow-wrap:anywhere; }
.rev-meta{ font-size:.72rem; color:var(--ink-faint); margin-top:3px; }
.rev-acts{ display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }

.log-row{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--sep); }
.log-row:last-child{ border-bottom:none; }
.log-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:999px; background:var(--sig-live); }
.log-tx{ flex:1 1 auto; min-width:0; }
.log-nm{ font-size:.86rem; color:var(--ink); overflow-wrap:anywhere; }
.log-meta{ font-size:.72rem; color:var(--ink-faint); margin-top:1px; }
.log-when{ font-size:.74rem; color:var(--ink-faint); flex:0 0 auto; white-space:nowrap; }

/* touch devices — grow the editor's small icon controls to a comfortable tap target */
@media (pointer:coarse){
  .ic-btn{ width:40px; height:40px; }
  .preset-btn{ width:38px; height:38px; }
  .std-sec-acts, .std-col-acts{ gap:8px; }
}