/* Hovarn Classic · shared office chrome (Files home, editor top bar, toolbar, menus, phone Format sheet).
   Used by Sheets, Slides, Docs and PDF. Every value comes from the theme tokens; the fallbacks after the
   comma only matter when the module is embedded in an app without a theme file.
   Editor-specific rules live in hovarn-sheets.css / hovarn-slides.css / hovarn-docs.css / hovarn-pdf.css. */

/* ---------------------------------------------------------------- editor frame (pages with "shell":"bare") */
body.hc-editor{background:var(--paper,#fbfaf7);overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100dvh;margin:0}
body.hc-editor > main#main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hc-app{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.hc-error{margin:auto;max-width:420px}
.hc-top{display:flex;align-items:center;gap:var(--s2,8px);padding:var(--s2,8px) var(--s4,16px);background:var(--sheet,#fff);border-bottom:1px solid var(--line,#e6e1d8);min-height:60px}
.hc-back{flex:none}
.hc-doc-ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm,8px)}
.hc-titlebox{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hc-title{font:650 var(--t-18,1.125rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);border:1px solid transparent;border-radius:var(--r-sm,8px);background:transparent;padding:4px 6px;margin-left:-6px;min-width:0;width:100%;max-width:520px;text-overflow:ellipsis}
.hc-title:hover{border-color:var(--line-2,#d9d2c5)}
.hc-title:focus{outline:none;border-color:var(--brand-700,#1d4271);background:var(--sheet,#fff);box-shadow:0 0 0 3px rgba(var(--brand-rgb,11,37,69),.12)}
.hc-meta{display:flex;align-items:center;gap:var(--s3,12px);font:400 var(--t-12,.75rem)/1.3 var(--f-body,system-ui);color:var(--ink-3,#5f6675);min-height:18px}
.hc-status{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.hc-status[data-state=saved]{color:var(--success,#1f7a4d)}
.hc-status[data-state=error]{color:var(--danger,#b42424)}
.hc-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3,#5f6675);display:inline-block}
.hc-status[data-state=saving] .hc-dot{animation:hc-pulse .9s ease-in-out infinite alternate}
@keyframes hc-pulse{to{opacity:.25}}
.hc-actions{display:flex;align-items:center;gap:var(--s2,8px);flex:none}
.hc-live{display:inline-flex;align-items:center;gap:4px}

/* ---------------------------------------------------------------- toolbar */
.hc-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px var(--s3,12px);background:var(--sheet,#fff);border-bottom:1px solid var(--line,#e6e1d8)}
.hc-toolbar .hc-group{display:flex;align-items:center;gap:2px}
.hc-sep{width:1px;height:24px;background:var(--line,#e6e1d8);margin:0 6px;flex:none}
.hc-tb{height:34px;min-width:34px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:var(--r-sm,8px);border:1px solid transparent;background:transparent;color:var(--ink-2,#4a5263);font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui);cursor:pointer;white-space:nowrap}
.hc-tb:hover{background:var(--paper-2,#f3efe7);color:var(--brand-900,#0b2545)}
.hc-tb[aria-pressed=true]{background:var(--brand-100,#e3e9f2);color:var(--brand-900,#0b2545);border-color:var(--brand-200,#d6deea)}
.hc-tb[disabled]{opacity:.45;cursor:not-allowed}
.hc-tb .ico{width:18px;height:18px}
.hc-tb-label{display:none}
.hc-select{height:34px;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-sm,8px);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);font:500 var(--t-12,.75rem)/1 var(--f-body,system-ui);padding:0 8px;max-width:150px}
.hc-select:hover{border-color:var(--brand-700,#1d4271)}
/* colour picker: a button that shows the chosen token as a swatch bar */
.hc-swatch-btn{position:relative}
.hc-swatch-btn .hc-swatch-bar{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:2px;background:var(--sw,var(--ink-1,#1a1f2b))}
.hc-swatches{display:grid;grid-template-columns:repeat(5,28px);gap:6px;padding:4px}
.hc-swatch{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2,#d9d2c5);cursor:pointer;background:var(--sw);padding:0}
.hc-swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--sheet,#fff),0 0 0 4px var(--brand-900,#0b2545)}
.hc-swatch.is-none{background:linear-gradient(135deg,transparent 46%,var(--danger,#b42424) 46% 54%,transparent 54%),var(--sheet,#fff)}
.hc-format-btn,.hc-format-head,.hc-phone-only{display:none}

/* ---------------------------------------------------------------- menus */
.hc-menu{position:fixed;z-index:200;min-width:220px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;background:var(--sheet,#fff);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-3,0 24px 60px -18px rgba(0,0,0,.35));padding:6px;animation:hc-pop .14s var(--ease,ease-out)}
@keyframes hc-pop{from{opacity:0;transform:translateY(-4px)}}
.hc-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:var(--r-sm,8px);background:transparent;color:var(--ink-1,#1a1f2b);font:500 var(--t-14,.875rem)/1.2 var(--f-body,system-ui);text-align:left;cursor:pointer}
.hc-menu-item:hover,.hc-menu-item:focus-visible{background:var(--paper-2,#f3efe7);outline:none;color:var(--brand-900,#0b2545)}
.hc-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--brand-700,#1d4271)}
.hc-menu-item .ico{color:var(--ink-3,#5f6675);flex:none}
.hc-menu-item[aria-checked=true] .ico{color:var(--accent-600,#d9560b)}
.hc-menu-item[disabled]{opacity:.45;cursor:not-allowed}
.hc-menu-item.is-danger{color:var(--danger,#b42424)}
.hc-menu-item.is-danger .ico{color:var(--danger,#b42424)}
.hc-menu-item kbd{margin-left:auto;font:500 var(--t-12,.75rem)/1 var(--f-body,system-ui);color:var(--ink-3,#5f6675)}
.hc-menu-pad{width:16px;flex:none}
.hc-menu-sep{height:1px;background:var(--line,#e6e1d8);margin:6px 4px}
.hc-menu-head{font:600 var(--t-12,.75rem)/1.2 var(--f-display,system-ui);color:var(--ink-3,#5f6675);padding:8px 10px 4px;letter-spacing:.03em}

/* ---------------------------------------------------------------- notes, dialogs, misc */
.hc-muted{color:var(--ink-3,#5f6675);font-size:var(--t-14,.875rem)}
.hc-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-12,.75rem);color:var(--ink-2,#4a5263);background:var(--info-bg,#e9f0fa);border:1px solid var(--brand-200,#d6deea);border-radius:var(--r-sm,8px);padding:8px 10px}
.hc-note .ico{color:var(--info,#2b5ea8);flex:none}
.hc-batches{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;border:0;padding:0;margin:12px 0 0}
.hc-share .dlg-head,.hc-share .dlg-foot{display:flex;align-items:center;gap:8px}
.hc-share .dlg-head h2{flex:1;margin:0}
.hc-drop-hint{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(var(--brand-rgb,11,37,69),.35);color:var(--on-brand,#fff);font:650 var(--t-24,1.5rem)/1.2 var(--f-display,system-ui);pointer-events:none}
.hc-drop-hint[hidden]{display:none}
.hc-drop-hint span{background:var(--brand-900,#0b2545);padding:20px 28px;border-radius:var(--r-lg,18px);box-shadow:var(--sh-3)}

/* type colours (state tokens double as file-type tints) */
.hc-ftype{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm,8px)}
.hc-ftype .ico{width:18px;height:18px}
.hc-ftype-sheet,.hc-thumb-sheet{background:var(--success-bg,#e8f3ec);color:var(--success,#1f7a4d)}
.hc-ftype-doc,.hc-thumb-doc{background:var(--info-bg,#e9f0fa);color:var(--info,#2b5ea8)}
.hc-ftype-slides,.hc-thumb-slides{background:var(--accent-50,#fdeede);color:var(--accent-700,#b84508)}
.hc-ftype-pdf,.hc-thumb-pdf{background:var(--danger-bg,#fbe9e9);color:var(--danger,#b42424)}

/* ---------------------------------------------------------------- Files home */
.hc-files .sheet-body{padding:0}
.hc-filebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3,12px);padding:var(--s4,16px) var(--s5,20px);border-bottom:1px solid var(--line,#e6e1d8)}
.hc-search{flex:0 1 300px;min-width:200px}
.hc-grow{flex:1}
.hc-sort .select{height:40px;min-width:160px}
.hc-files-body{min-height:120px}
.hc-loading{padding:var(--s6,24px) var(--s5,20px)}
.hc-ftable .hc-fcell{display:flex;align-items:center;gap:var(--s3,12px)}
.hc-ftable .hc-fcell > span:last-child{display:flex;flex-direction:column;min-width:0}
.hc-fname{font:600 var(--t-14,.875rem)/1.3 var(--f-display,system-ui);color:var(--brand-900,#0b2545);text-decoration:none}
.hc-fname:hover{text-decoration:underline;text-decoration-color:var(--accent-500,#f26a1b);text-underline-offset:3px}
.hc-fname::after{content:"";position:absolute;inset:0}
.hc-ftable tr,.hc-card{position:relative}
.hc-more{position:relative;z-index:2}
.hc-ftable .hc-shared .tag{margin:2px 2px 2px 0}
.hc-ftable td.hc-act{width:56px;text-align:right}
.hc-grid{list-style:none;margin:0;padding:var(--s5,20px);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s4,16px)}
.hc-card{border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);background:var(--sheet,#fff);overflow:hidden;transition:border-color var(--dur,.2s) var(--ease,ease)}
.hc-card:hover{border-color:var(--brand-700,#1d4271)}
.hc-card-thumb{display:grid;place-items:center;aspect-ratio:16/10;border-bottom:1px solid var(--line,#e6e1d8)}
.hc-card-thumb .ico{width:44px;height:44px;opacity:.85}
.hc-card-body{display:flex;align-items:center;gap:10px;padding:10px 6px 10px 12px}
.hc-card-text{display:flex;flex-direction:column;min-width:0;flex:1}
.hc-card-text .hc-fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-card-text small{color:var(--ink-3,#5f6675);font-size:var(--t-12,.75rem)}
.hc-newmenu-btn .ico-chev{margin-left:-2px}

/* ---------------------------------------------------------------- phones */
@media (max-width:640px){
  .hc-top{padding:6px 8px;gap:4px;min-height:56px}
  .hc-title{font-size:var(--t-16,1rem)}
  .hc-doc-ico{display:none}
  .hc-actions .btn-label{display:none}
  .hc-actions .btn{padding:0 10px}
  .hc-format-btn{display:inline-flex}
  .hc-phone-only{display:inline-grid}
  /* toolbar turns into a bottom "Format" sheet */
  .hc-toolbar{position:fixed;left:0;right:0;bottom:0;z-index:150;max-height:62vh;overflow:auto;padding:0 12px 16px;border-top:1px solid var(--line,#e6e1d8);border-bottom:0;border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0;box-shadow:var(--sh-3);transform:translateY(105%);visibility:hidden;transition:transform .24s var(--ease,ease),visibility 0s .24s;gap:6px}
  .hc-toolbar.is-open{transform:none;visibility:visible;transition:transform .24s var(--ease,ease)}
  .hc-format-head{display:flex;align-items:center;justify-content:space-between;width:100%;position:sticky;top:0;background:var(--sheet,#fff);padding:12px 0 8px;z-index:1}
  .hc-format-head h2{margin:0;font:650 var(--t-16,1rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
  .hc-toolbar .hc-group{flex-wrap:wrap;width:100%;gap:6px;padding:6px 0;border-bottom:1px solid var(--line,#e6e1d8)}
  .hc-toolbar .hc-sep{display:none}
  .hc-tb{height:44px;min-width:44px}
  .hc-tb-label{display:inline}
  .hc-desk-only{display:none!important}
  .hc-select{height:44px;max-width:none;flex:1}
  .hc-filebar{padding:12px 16px}
  .hc-search{flex:1 1 100%}
  .hc-filebar .chips{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .hc-grow{display:none}
  .hc-sort{flex:1}
  .hc-sort .select{width:100%}
  .hc-grid{grid-template-columns:1fr 1fr;padding:12px;gap:10px}
  .hc-batches{grid-template-columns:1fr}
}
@media print{.hc-top,.hc-toolbar,.hc-menu{display:none!important}}
.hc-footnote{display:flex;gap:6px;align-items:center;margin-top:var(--s4,16px)}