/* ==========================================================================
   ATELIER — visual redesign layer for Class Binder.
   Loaded AFTER style.css, so it only overrides colors/type/layout. The
   original look is untouched underneath: delete the <link> to atelier.css
   in index.html (or restore git tag "pre-atelier-redesign") to revert.
   Design language: dark editorial dashboard — deep navy surfaces, hairline
   borders, one indigo accent, serif headings, sidebar navigation.
   ========================================================================== */

:root{
  --ink:#eef2f8;
  --paper:#111a2e;
  --paper-2:#182238;
  --bg:#0a1122;
  --grid-line:rgba(255,255,255,0.09);
  --chrome-bg:#080d1a;
  --chrome-text:#eef2f8;
  --accent:#6366f1;
  --math:#f87171;
  --science:#fbbf24;
  --english:#34d399;
  --history:#f472b6;
  --focus:#f0658a;
  --shop:#2fbf9f;
  --premium:#f59e0b;
  --radius:14px;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head:'Newsreader', Georgia, 'Times New Roman', serif;
  --muted:#8e9bb2;
  --dim:#5f6b82;
  --sidebar-w:256px;
}
body.dark{
  --ink:#f1f5f9;
  --paper:#0d1526;
  --paper-2:#141d33;
  --bg:#060b17;
  --grid-line:rgba(255,255,255,0.08);
  --chrome-bg:#04070f;
}

html{ font-size:100%; }
body{
  background:var(--bg);
  background-size:auto;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1{ font-family:var(--font-head); font-weight:500; letter-spacing:-0.015em; }
h2,h3{ font-family:var(--font-head); font-weight:500; letter-spacing:-0.01em; }
p.muted, .muted{ color:var(--muted); }

/* ---------- Top bar ---------- */
.topbar{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  color:var(--ink);
  padding:8px 20px;
  min-height:56px;
  box-shadow:none;
  border-bottom:1px solid var(--grid-line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.brand{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em; margin-left:6px; }
.topbar-profile-btn{ width:36px; height:36px; border:1.5px solid var(--grid-line); background:var(--paper-2); }
.topbar-profile-btn:hover{ transform:none; border-color:rgba(255,255,255,0.3); }
.topbar-profile-btn svg{ width:20px; height:20px; }
.streak-pill{
  background:rgba(255,255,255,0.05); border:1px solid var(--grid-line);
  color:var(--ink); padding:5px 12px; border-radius:999px; font-size:0.8rem; font-weight:600;
}
.topbar-shop-btn{
  background:rgba(255,255,255,0.05); border:1px solid var(--grid-line); color:var(--ink);
  width:32px; height:32px;
}
.topbar-shop-btn:hover{ background:rgba(255,255,255,0.1); }
.hamburger{ color:var(--ink); }
.topbar-profile-card{ background:var(--paper-2); border-color:var(--grid-line); box-shadow:0 18px 40px rgba(0,0,0,0.5); }

/* ---------- Navigation drawer / sidebar ---------- */
.drawer-overlay{ background:rgba(2,5,12,0.62); backdrop-filter:blur(2px); }
.drawer{
  background:var(--chrome-bg); color:var(--ink);
  border-right:1px solid var(--grid-line); box-shadow:none;
  padding:20px 14px 16px; gap:2px; width:var(--sidebar-w);
}
.drawer-brand{
  font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:-0.01em;
  padding:2px 10px 18px; margin-bottom:6px; opacity:1; border-bottom:1px solid var(--grid-line);
  display:flex; align-items:center; gap:10px;
}
.drawer-brand::before{
  content:""; width:22px; height:22px; flex-shrink:0; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>") center/contain no-repeat;
}
.drawer-group-title{
  font-size:0.62rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--dim); padding:16px 12px 6px;
}
.drawer-group-title:first-of-type{ padding-top:8px; }
.drawer-btn{
  color:var(--muted); font-size:0.85rem; font-weight:500; padding:8px 12px; border-radius:8px; gap:11px;
  border-left:2px solid transparent;
}
.drawer-btn:hover{ background:rgba(255,255,255,0.045); color:#fff; }
.drawer-btn.active{
  background:linear-gradient(90deg, rgba(99,102,241,0.22) 0%, rgba(99,102,241,0.06) 100%);
  color:#fff; font-weight:600; border-left-color:var(--accent);
}
.drawer-btn .icn{
  width:18px; height:18px; border-radius:0; background:none; border:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; color:currentColor; opacity:0.85;
}
.drawer-btn .icn svg{ width:17px; height:17px; }
.drawer-btn.active .icn{ color:#a5b4fc; opacity:1; }
.drawer-btn:hover .icn{ transform:none; }
.drawer-sep{ display:none; }
.drawer-pro-card{
  background:rgba(255,255,255,0.03); border:1px solid var(--grid-line); border-radius:12px; padding:11px 12px;
}
.drawer-pro-card:hover{ filter:none; transform:none; border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.06); }
.drawer-pro-icon{ background:rgba(245,158,11,0.14); color:#fbbf24; border-radius:8px; }
.drawer-pro-title{ color:var(--ink); }
.drawer-pro-sub{ color:var(--muted); opacity:1; }
.drawer-pro-arrow{ color:var(--dim); opacity:1; }

/* ---------- Page container ---------- */
.page{
  background:transparent; box-shadow:none; border-radius:0;
  margin:0 auto; max-width:1180px; padding:30px 24px 96px;
}
.back-home-btn{ background:var(--paper); border-color:var(--grid-line); color:var(--muted); margin:0 0 18px; }
.back-home-btn:hover{ background:var(--paper-2); color:#fff; }

/* ---------- Desktop: persistent sidebar ---------- */
@media (min-width:1024px){
  .hamburger{ display:none; }
  .brand{ display:none; }
  .drawer-overlay{
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:1; pointer-events:none; width:var(--sidebar-w); right:auto; z-index:600;
  }
  .drawer{ transform:none; pointer-events:all; max-width:none; }
  .topbar{ margin-left:var(--sidebar-w); justify-content:flex-end; }
  .topbar > div:first-child{ order:2; }
  .topbar > div:nth-child(2){ order:1; }
  .page{ margin-left:calc(var(--sidebar-w) + 4px); margin-right:0; max-width:none; padding:34px 44px 96px; }
  .page > .view{ max-width:1240px; margin-left:auto; margin-right:auto; }
  .home-grid{ display:none; }
  .back-home-btn{ display:none; }
}

/* ==========================================================================
   Polish pass
   ========================================================================== */

/* View titles: editorial serif, larger, like the hero of the reference design */
.view > h2,
.view > .task-toolbar h2,
.view > .sched-toolbar h2,
.view > .cust-hero h1,
.view > h1{
  font-size:2rem; line-height:1.15; font-weight:500; letter-spacing:-0.02em; color:#fff;
}
.view > .task-toolbar .task-toolbar-sub{ font-size:0.9rem; }

/* Small numbers, labels and table heads stay in the sans face */
.ds-pill-value, .ds-agenda-countdown-box strong, .streak-box .count, .goals-stat-num,
.profile-stat-num, .profile-metric-num, .ws-stat-num, .ws-adv-value, .diploma-row-count,
.cal-month-label, .canvas-wow-stat strong, table.schedule th, .report-row.report-total,
.ws-tip-head strong, .toast-title{
  font-family:var(--font-body);
}
table.schedule th{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.7rem; font-weight:700; color:var(--muted); }

/* Cards: uniform hairline surface, no glow */
.ds-card, .ds-header-card, .ds-actions-bar, .profile-box, .settings-card, .login-card{
  background:var(--paper); border:1px solid var(--grid-line); border-radius:16px; box-shadow:none;
}
.home-card{ box-shadow:none; border:1px solid var(--grid-line); border-left:1px solid var(--grid-line); }
.home-card:hover{ transform:none; box-shadow:none; border-color:rgba(255,255,255,0.2); background:var(--paper-2); }
.ds-card-title h2, .ds-card-title h3{ font-size:1.05rem; }

/* Weekly Pro Insights — neutral surface instead of the tinted gradient */
.home-summary-card, #home-summary-card{
  background:var(--paper) !important; border:1px solid var(--grid-line) !important; box-shadow:none !important;
}

/* Buttons: flat, confident, one accent */
.mini-btn, .ds-btn.primary, .add-btn, .task-add button, .login-submit-btn{ box-shadow:none; }
.ds-btn.primary{ background:var(--accent); }
.ds-btn.primary:hover{ filter:brightness(1.1); }

/* Floating AI button: flat indigo, no glow */
.ai-fab{
  background:var(--accent) !important; box-shadow:0 4px 14px rgba(0,0,0,0.45) !important;
  border:1px solid rgba(255,255,255,0.14);
}
.ai-fab:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.55) !important; transform:scale(1.05); }

/* Focus timer ring: keep the colour, drop the neon */
.timer-ring, .ring-outer{ filter:none; box-shadow:none; }

/* Inputs */
input:not([type="checkbox"]):not([type="color"]):not([type="range"]), select, textarea{
  background:var(--bg); border:1px solid var(--grid-line); color:var(--ink); border-radius:10px;
}
input::placeholder, textarea::placeholder{ color:var(--dim); }

/* Modals */
.modal-box{ background:var(--paper-2); border:1px solid var(--grid-line); box-shadow:0 24px 60px rgba(0,0,0,0.6); color:var(--ink); }
.modal-btn-secondary{ background:rgba(255,255,255,0.06); color:var(--ink); border:1px solid var(--grid-line); }
.modal-overlay{ background:rgba(2,5,12,0.7); }

/* ---------- Mobile / tablet ---------- */
@media (max-width:1023px){
  .topbar{ padding:8px 12px; gap:8px; }
  .topbar > div:first-child{ min-width:0; gap:6px !important; }
  .brand{ font-size:0.95rem; margin-left:2px; overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
  .topbar > div:nth-child(2){ gap:6px !important; flex-shrink:0; }
  .streak-pill{ padding:5px 10px; font-size:0.78rem; }
  .streak-pill [data-i18n="common.streak"]{ display:none; }
  .page{ padding:22px 16px 96px; margin:0; }
  .view > h2, .view > .task-toolbar h2, .view > .sched-toolbar h2, .view > h1{ font-size:1.65rem; }
  .task-add{ align-items:stretch; }
  .task-add input, .task-add select, .task-add button{ flex:0 0 auto !important; }
  .task-add input[type="date"]{ height:auto; min-height:0; }
  .drawer{ width:270px; max-width:82vw; }
}

/* Login card: inner inputs sit inside .login-input-wrap, which is the visible field */
.login-card{ padding:30px 28px; }
.login-input-wrap{ background:var(--bg); border:1px solid var(--grid-line); }
.login-input-wrap input, .login-input-wrap input:focus{
  background:none !important; border:none !important; box-shadow:none !important; padding:0;
}
.login-secondary-btn{ background:transparent; border:1px solid var(--grid-line); color:var(--ink); }
.login-secondary-btn:hover{ background:rgba(255,255,255,0.05); }
a{ color:#a5b4fc; }
a:hover{ color:#c7d2fe; }

@media (max-width:1023px){
  #cat-add-input{ min-width:0; flex:1 1 140px; }
  #cat-add-input + button{ flex-shrink:0; white-space:nowrap; }
}