/* Derrick redesign — shared screen design system (ported from shared.jsx).
   Each screen is a standalone 380×720 "Sheets sidebar" artboard. */

@font-face{font-family:"Syne";font-weight:400;font-display:swap;src:url("fonts/syne-latin-400-normal.woff2") format("woff2"),url("fonts/syne-latin-400-normal.woff") format("woff");}
@font-face{font-family:"Syne";font-weight:500;font-display:swap;src:url("fonts/syne-latin-500-normal.woff2") format("woff2"),url("fonts/syne-latin-500-normal.woff") format("woff");}
@font-face{font-family:"Syne";font-weight:600;font-display:swap;src:url("fonts/syne-latin-600-normal.woff2") format("woff2"),url("fonts/syne-latin-600-normal.woff") format("woff");}
@font-face{font-family:"Syne";font-weight:700;font-display:swap;src:url("fonts/syne-latin-700-normal.woff2") format("woff2"),url("fonts/syne-latin-700-normal.woff") format("woff");}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:"Syne",system-ui,sans-serif;color:#1a1a1a;background:transparent;}
button{font-family:inherit;}
input::placeholder{color:#999;}

@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes blinkA{0%,100%{opacity:1;}50%{opacity:0;}}

/* ---- SidebarFrame ---- */
.sf-frame{
  width:380px;height:720px;background:#fff;
  border:1px solid #d6d8db;border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.sf-tabbar{
  height:28px;background:#f1f3f4;border-bottom:1px solid #d6d8db;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;flex:0 0 auto;
}
.sf-tabtitle{font-family:system-ui,-apple-system,sans-serif;font-size:12px;color:#3c4043;font-weight:500;}
.sf-chromebtns{display:flex;align-items:center;gap:4px;}
.sf-chromebtn{width:18px;height:18px;padding:0;border:0;background:transparent;color:#5f6368;font-family:system-ui,sans-serif;font-size:13px;line-height:18px;cursor:pointer;border-radius:2px;}
.sf-body{flex:1 1 auto;overflow-y:auto;background:#fff;position:relative;}
.sf-body.no-scroll{overflow-y:hidden;}
.sf-footer{flex:0 0 auto;border-top:1px solid #ececec;background:#fff;}

/* ---- Collapsible disclosure (output format block, etc.) ---- */
.collapse-body{max-height:0;overflow:hidden;transition:max-height 300ms ease;}
.collapse.is-open .collapse-body{max-height:600px;}
.collapse-head{transition:background 140ms ease;}
.collapse-chev{display:inline-flex;transition:transform 260ms ease;}
.collapse.is-open .collapse-chev{transform:rotate(180deg);}
.collapse.is-open .collapse-head{border-bottom:1px solid #f0f0f0;}

/* ---- Buttons ---- */
.btn{
  height:38px;padding:0 16px;font-family:"Syne",system-ui,sans-serif;font-size:13px;font-weight:600;
  border:0;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;transition:all 150ms;letter-spacing:-0.005em;background:#097fe8;color:#fff;
}
.btn--full{width:100%;}
.btn--sm{height:30px;padding:0 12px;font-size:12px;}
.btn--md{height:38px;padding:0 16px;font-size:13px;}
.btn--lg{height:44px;padding:0 20px;font-size:14px;}
/* primary (default bg blue). color modifiers set bg */
.btn--blue{background:#097fe8;color:#fff;}
.btn--green{background:#10b981;color:#fff;}
.btn--orange{background:#f59e0b;color:#fff;}
.btn--purple{background:#7c3aed;color:#fff;}
.btn--dark{background:#1a1a1a;color:#fff;}
/* secondary */
.btn--secondary{background:#fff;color:#1a1a1a;border:1px solid #e5e5e5;}
/* ghost: transparent, text = color */
.btn--ghost{background:transparent;}
.btn--ghost.btn--blue{color:#097fe8;}
.btn--ghost.btn--green{color:#10b981;}
.btn--ghost.btn--orange{color:#f59e0b;}
.btn--ghost.btn--purple{color:#7c3aed;}
.btn--ghost.btn--dark{color:#1a1a1a;}
/* tinted */
.btn--tinted.btn--blue{background:#e8f1fc;color:#097fe8;}
.btn--tinted.btn--green{background:#e7f9f1;color:#10b981;}
.btn--tinted.btn--orange{background:#fef3e2;color:#f59e0b;}
.btn--tinted.btn--purple{background:#f1eafd;color:#7c3aed;}
.btn--tinted.btn--dark{background:#f0f0f0;color:#1a1a1a;}

/* ---- Pill ---- */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:9999px;letter-spacing:.01em;white-space:nowrap;background:#f3f4f6;color:#4b5563;}
.pill--blue{background:#e8f1fc;color:#0768c5;}
.pill--green{background:#e7f9f1;color:#047857;}
.pill--orange{background:#fef3e2;color:#b45309;}
.pill--purple{background:#f1eafd;color:#6d28d9;}
.pill--red{background:#fdecec;color:#b91c1c;}
.pill--neutral{background:#f3f4f6;color:#4b5563;}
.pill--dark{background:#1a1a1a;color:#fff;}

/* ---- SectionLabel ---- */
.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#999;}

/* ---- Logo ---- */
.logo{display:inline-flex;align-items:center;gap:6px;font-family:"Syne";font-weight:700;font-size:18px;color:#1a1a1a;letter-spacing:-0.02em;}
.logo__mark{width:22px;height:22px;border-radius:6px;background:#000;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;overflow:hidden;}

/* ---- SidebarHeader ---- */
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #ececec;background:#fff;flex-shrink:0;}
.sidebar-header.dense{padding:10px 12px;}
.credit-pill{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9999px;background:#f3f6f9;font-size:11px;font-weight:600;color:#0768c5;}
.icon-btn{width:24px;height:24px;padding:0;border:0;background:transparent;color:#666;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;}

svg{flex-shrink:0;}