/* DeepSerp — Pencil design system (dark) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;900&family=Barlow+Semi+Condensed:wght@900&display=swap');

:root {
  --bg-0:#07081a; --bg-1:#0e1030; --bg-2:#161a3e; --bg-3:#1f2450; --bg-4:#2a3066;
  --header-bg:#0a0b22;
  --fg-0:#ffffff; --fg-1:rgba(255,255,255,0.92); --fg-2:rgba(255,255,255,0.68);
  --fg-3:rgba(255,255,255,0.48); --fg-4:rgba(255,255,255,0.28);
  --border-subtle:rgba(255,255,255,0.08); --border-default:rgba(255,255,255,0.14);
  --border-strong:rgba(255,255,255,0.24);
  --brand:#163bf3; --brand-on-dark:#6d83f3; --brand-soft:rgba(22,59,243,0.14);
  --brand-muted:rgba(22,59,243,0.28); --brand-grad:linear-gradient(135deg,#2d50f5,#163bf3);
  --success:#60d399; --success-bg:rgba(96,211,153,0.14);
  --danger:#ff7968;  --danger-bg:rgba(255,121,104,0.14);
  --warning:#fbbe2e; --warning-bg:rgba(251,190,46,0.14);
  --info:#4fb3f6;    --info-bg:rgba(79,179,246,0.14);
  --shadow-sm:0 2px 8px 0 rgba(0,0,0,0.4);
  --shadow-md:0 4px 16px 0 rgba(0,0,0,0.48);
  --shadow-lg:0 8px 32px 0 rgba(0,0,0,0.56);
  --font-primary:'Figtree',Helvetica,Arial,sans-serif;
  --font-display:'Barlow Semi Condensed','Figtree',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ease-regular:cubic-bezier(0.35,0,0.1,1);
  --ease-entry:cubic-bezier(0.1,0,0,1);
}

/* Light theme — next-themes adds class "light" to <html> */
.light {
  --bg-0:#eef1f7; --bg-1:#ffffff; --bg-2:#ffffff; --bg-3:#f1f4fa; --bg-4:#e4e9f4;
  --fg-0:#0b1020; --fg-1:#222a3d; --fg-2:#55607a; --fg-3:#8a93a8; --fg-4:#b6bccd;
  --border-subtle:rgba(11,16,32,0.07); --border-default:rgba(11,16,32,0.12);
  --border-strong:rgba(11,16,32,0.20);
  --brand-on-dark:#163bf3; --brand-soft:rgba(22,59,243,0.07); --brand-muted:rgba(22,59,243,0.16);
  --shadow-sm:0 1px 3px rgba(13,18,40,0.08); --shadow-md:0 8px 24px rgba(13,18,40,0.10);
  --shadow-lg:0 18px 50px rgba(13,18,40,0.16);
  --success:#1e9b56; --success-bg:rgba(36,168,101,0.12);
  --danger:#e23a23;  --danger-bg:rgba(255,52,26,0.10);
  --warning:#b07400; --warning-bg:rgba(201,134,0,0.13);
  --info:#0b7fc7;    --info-bg:rgba(0,137,227,0.10);
  /* header stays dark navy in both themes (--header-bg keeps the :root value) */
}

html, body { margin:0; padding:0; background:var(--bg-0); color:var(--fg-1);
  font-family:var(--font-primary); }
::placeholder { color:var(--fg-3); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--border-default); border-radius:99px;
  border:3px solid transparent; background-clip:content-box; }

/* inputs/selects/textareas default to the dark surface */
input, textarea, select { font-family:var(--font-primary); }
select option { background:var(--bg-2); color:var(--fg-0); }

/* sweet-spot apple hover tooltip (pure CSS, no state) */
.sweet-apple { position: relative; display: inline-flex; }
.sweet-apple .sweet-tip {
  position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%) translateY(4px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
  z-index: 60; white-space: nowrap; font-size: 12px; font-weight: 600;
  background: #0a0b22; color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px; padding: 7px 11px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.sweet-apple:hover .sweet-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* treemap cell hover tooltip */
.tm-cell .tm-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
  z-index: 80; white-space: nowrap; margin-bottom: 7px;
  background: #0a0b22; color: #fff; border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 9px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.tm-cell:hover .tm-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tm-cell:hover { outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; z-index: 5; }
.tm-tip .tm-kw { font-size: 13px; font-weight: 800; }
.tm-tip .tm-sub { font-size: 11.5px; color: rgba(255,255,255,.72); margin-top: 3px; }

@keyframes dsSpin { to { transform:rotate(360deg); } }
@keyframes dsPop  { from { transform:translateY(-4px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dsUp   { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }

/* ── Responsive workspace (tool pages) ────────────────────────────────────────
   The app shell is header + sidebar + main in a flex row, sized for desktop. Below
   900px the sidebar becomes an off-canvas drawer so `main` gets the full width.
   Inline styles beat external CSS, so the overrides below need !important. */
.ds-hamburger { display: none; }
.ds-scrim { display: none; }
.ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  .ds-hamburger { display: flex !important; }

  /* Sidebar → drawer: slides in over the content, scrim closes it. */
  .ds-sidebar {
    position: fixed !important;
    top: 0 !important; left: 0; bottom: 0;
    height: 100vh !important;
    width: 262px !important;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.45);
  }
  .ds-sidebar.is-open { transform: translateX(0); }
  .ds-scrim.is-open { display: block; position: fixed; inset: 0;
                      background: rgba(4,6,20,.55); z-index: 1100; }

  .ds-main { padding: 22px 16px 64px !important; }
  /* Two-column form/report rows stack rather than squeezing to unusable widths. */
  .ds-stack2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .ds-main { padding: 16px 12px 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-sidebar { transition: none !important; }
}

/* Wide grid-built report tables: scroll inside their own container on narrow screens
   instead of clipping (they set overflow:hidden inline for the rounded corners) or
   stretching the page sideways. `> *` covers the header row + every data row. */
@media (max-width: 900px) {
  .ds-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .ds-table > * { min-width: 660px; }
}

/* App header: hamburger + logo + Projects + New task + Credits + avatar overflows a phone.
   Tighten the padding and drop the two items that are reachable elsewhere — Projects (the
   logo links there, and the drawer lists it) and the Credits pill (also on /billing). */
@media (max-width: 900px) {
  .ds-header { padding: 0 12px !important; gap: 8px; }
  .ds-hide-sm { display: none !important; }
}
@media (max-width: 560px) {
  .ds-hide-xs { display: none !important; }
}

/* Walkthrough card: sits top-right of a tool form's heading, text flows beside it.
   The card (~66px) is far shorter than the heading block, so the float stays contained.
   Below 900px it stops floating and simply stacks above the heading. */
.ds-float-right { float: right; margin-left: 20px; margin-bottom: 14px; }
@media (max-width: 900px) {
  .ds-float-right { float: none; margin-left: 0; margin-bottom: 16px; }
}