/* ===========================================================
   Sayaji Samachar Dashboard — Design System
   Neubrutalist: hard offset shadows, thick borders, big icons.
   Light mode only. Shared across every page.
=========================================================== */
:root{
  --bg:#FDF4E3;
  --card:#FFFFFF;
  --ink:#1B1712;
  --ink-soft:#6E6559;
  --ink-faint:#A79C88;
  --line:#1B1712;

  --gold:#F5A623;
  --gold-dark:#C97D0E;
  --gold-wash:#FCE7C0;
  --crimson:#E8503A;
  --crimson-dark:#B93A26;
  --crimson-wash:#FBDCD5;
  --teal:#1FA187;
  --teal-dark:#127A65;
  --teal-wash:#D2F0E9;
  --indigo:#4A5FE0;
  --indigo-dark:#3345B8;
  --indigo-wash:#DDE1FA;
  --violet:#8B5FE0;
  --violet-dark:#6A3FC0;
  --violet-wash:#E9DFFA;
  --ink-navy:#232030;
  --green-ok:#3E8E64;

  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --shadow-off:5px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg);}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  max-width:560px; margin:0 auto; padding-bottom:112px; position:relative; overflow-x:hidden;
  min-height:100vh;
}
.gu{font-family:'Noto Sans Gujarati',sans-serif;}
.display{font-family:'Baloo 2',sans-serif;}
button,a{font-family:inherit; cursor:pointer; text-decoration:none; color:inherit; border:none; background:none;}
input,textarea,select{font-family:inherit; color:inherit;}
img{max-width:100%; display:block;}

.hard{ border:2.5px solid var(--line); box-shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--sh, var(--ink)); }
.hard:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--sh, var(--ink)); }
.hard-static{ border:2.5px solid var(--line); box-shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--sh, var(--ink)); }

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 8px; gap:10px; }
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
img.brand-mark{
  width:56px; height:56px; object-fit:contain; object-position:center; flex:none;
  border:0 !important; border-radius:0 !important; background:transparent !important;
  box-shadow:none !important; padding:0; outline:none;
}
.brand-word .n1{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:16px; line-height:1;}
.brand-word .n2{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-top:3px;}
.top-icons{display:flex; gap:9px; align-items:center; flex:none;}
.icon-chip{
  width:40px; height:40px; border-radius:13px; background:var(--card);
  display:flex; align-items:center; justify-content:center; position:relative; --sh:var(--ink); flex:none;
}
.icon-chip .badge{
  position:absolute; top:-6px; right:-6px; width:19px; height:19px; border-radius:50%;
  background:var(--crimson); border:2px solid var(--line); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.back-chip{ display:flex; align-items:center; gap:6px; padding:9px 13px 9px 11px; border-radius:100px; background:var(--card); --sh:var(--ink); font-weight:700; font-size:13px; }

.page-hero{ margin:14px 16px 0; padding:20px 18px 18px; border-radius:var(--r-lg); background:var(--ink-navy); color:#fff; border:2.5px solid var(--line); position:relative; overflow:hidden; }
.page-hero .hero-sun{ position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; }
.page-hero .eyebrow{ font-size:11px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.page-hero h1{ font-family:'Baloo 2',sans-serif; font-size:24px; font-weight:700; margin-top:6px; line-height:1.2; }
.page-hero p{ font-size:12.5px; color:#C9C4D6; margin-top:6px; line-height:1.5; max-width:400px; }
.status-dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
.status-dot.on{background:#4ADE80; animation:pulse 1.4s infinite;}
.status-dot.off{background:#F87171;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

.section{padding:20px 16px 4px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.section-head .eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.section-head h2{font-family:'Baloo 2',sans-serif; font-size:19px; font-weight:700; margin-top:2px;}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border-radius:14px; font-weight:700; font-size:14px; border:2.5px solid var(--line); --sh:var(--ink); width:100%; }
.btn-gold{ background:var(--gold); --sh:var(--gold-dark); }
.btn-navy{ background:var(--ink-navy); color:#fff; --sh:var(--gold); }
.btn-ghost{ background:var(--card); }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn-inline{ width:auto; padding:9px 14px; font-size:12.5px; }
.qpill{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:100px; background:var(--card); font-weight:700; font-size:13px; white-space:nowrap; --sh:var(--ink); }
.qpill.fill{background:var(--gold); --sh:var(--gold-dark);}

.panel{ background:var(--card); border-radius:var(--r-md); padding:16px; margin:14px 16px 0; --sh:var(--ink); }
.panel h3{ font-family:'Baloo 2',sans-serif; font-size:15.5px; font-weight:700; margin-bottom:4px; }
.empty{ font-size:12px; color:var(--ink-soft); padding:14px 0 4px; text-align:center; }
.empty .gu{ display:block; margin-top:4px; font-size:15px; color:var(--ink); }

.field-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:block; }
.text-input, .textarea{ width:100%; border-radius:14px; padding:13px 14px; font-size:14px; background:var(--card); border:2.5px solid var(--line); box-shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--sh, var(--ink)); }
.textarea{ min-height:120px; resize:vertical; line-height:1.55; font-family:inherit; }
.text-input:focus, .textarea:focus{ outline:none; }
.hint{ font-size:11px; color:var(--ink-faint); margin-top:7px; line-height:1.5; }

.chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{display:none;}
.pick-chip{ flex:0 0 auto; padding:9px 14px; border-radius:100px; font-size:12.5px; font-weight:700; background:var(--card); --sh:var(--ink); border:2.5px solid var(--line); box-shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--sh, var(--ink)); }
.pick-chip.active{ background:var(--ink-navy); color:#fff; --sh:var(--gold); }

.toast-stack{ position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; width:calc(100% - 32px); max-width:520px; align-items:center; }
.toast{ background:var(--ink-navy); color:#fff; border:2.5px solid var(--line); border-radius:13px; padding:11px 16px; font-size:12.5px; font-weight:600; box-shadow:4px 4px 0 0 var(--gold); animation:toastIn .2s ease; max-width:100%; }
.toast.err{ box-shadow:4px 4px 0 0 var(--crimson); }
.toast.ok{ box-shadow:4px 4px 0 0 var(--teal); }
@keyframes toastIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.dock-wrap{ position:fixed; left:0; right:0; bottom:14px; display:flex; justify-content:center; z-index:50; pointer-events:none; }
.dock{ pointer-events:auto; display:flex; align-items:stretch; gap:3px; background:var(--ink-navy); border-radius:24px; padding:8px 7px; border:2.5px solid var(--line); box-shadow:5px 5px 0 0 var(--gold); max-width:calc(560px - 32px); width:calc(100% - 32px); justify-content:space-between; }
.dock-item{ flex:1 1 0; min-width:0; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#8B85A0; padding:7px 2px 6px; }
.dock-item svg{ width:20px; height:20px; flex:none; }
.dock-label{ font-size:9px; font-weight:700; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; color:inherit; }
.dock-item.active{ background:var(--gold); color:var(--ink-navy); }
.dock-item:not(.active):active{ background:rgba(255,255,255,.08); }

.studio-shell{ display:block; }
.studio-col{ min-width:0; }
.phone-only{}
.desk-only{ display:none !important; }

/* —— Phone portrait: stacked newsroom flow —— */
@media (max-width: 899px){
  body{ max-width:560px; }
  .page-hero{ margin:12px 14px 0; padding:18px 16px 16px; }
  .section{ padding:16px 14px 4px; }
  .panel, .out-panel{ margin-left:14px; margin-right:14px; }
  .btn{ min-height:48px; }
  .textarea{ font-size:16px; } /* avoid iOS zoom */
}

/* —— Tablet+ —— */
@media (min-width: 620px) and (max-width: 959px){
  body{ max-width:900px; }
  .desk-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .dock{ max-width:460px; }
}

/* —— Desktop / landscape workspace: fit tools without deep scrolling —— */
@media (min-width: 960px){
  body{
    max-width:1320px;
    padding-bottom:88px;
  }
  .topbar{ padding:12px 22px 6px; }
  img.brand-mark{ width:58px; height:58px; }
  .page-hero{
    margin:8px 22px 0; padding:12px 18px;
    display:flex; align-items:center; gap:18px;
  }
  .page-hero .hero-sun{ width:90px; height:90px; right:-20px; top:-24px; }
  .page-hero .eyebrow{ margin:0; }
  .page-hero h1{ font-size:20px; margin-top:2px; }
  .page-hero p{ display:none; }
  .section{ padding:10px 22px 4px; }
  .section-head{ margin-bottom:8px; }
  .section-head h2{ font-size:17px; }
  .panel{ margin:10px 22px 0; padding:14px; }
  .desk-grid{ grid-template-columns:repeat(5,1fr) !important; }
  .dock{ max-width:520px; }
  .toast-stack{ max-width:640px; }
  .phone-only{ display:none !important; }
  .desk-only{ display:initial !important; }

  .studio-shell{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:8px 18px;
    align-items:start;
    padding:0 22px 8px;
    min-height:calc(100vh - 150px);
  }
  .studio-shell > .section,
  .studio-shell > .panel,
  .studio-shell > .out-panel,
  .studio-shell > .preview-wrap,
  .studio-shell > .preview-meta{
    margin-left:0; margin-right:0; padding-left:0; padding-right:0;
  }
  .studio-shell .preview-wrap{ margin:0; }
  .studio-shell .preview-meta{ padding-left:0; padding-right:0; }
  .studio-col{
    display:flex; flex-direction:column; gap:8px;
    min-height:0;
  }
  .studio-col .section{ padding:8px 0 0; }
  .studio-col .panel{ margin:8px 0 0; }
  .studio-shell.one-col{ grid-template-columns:1fr; }
  .studio-shell.wide-left{ grid-template-columns:minmax(0,1.35fr) minmax(320px,0.9fr); }
  .studio-shell.wide-right{ grid-template-columns:minmax(280px,0.85fr) minmax(0,1.25fr); }

  /* Keep primary actions in the first screen on tall-enough landscape */
  @media (min-height: 700px){
    body.fit-screen{ height:100vh; overflow:hidden; padding-bottom:0; }
    body.fit-screen .dock-wrap{ bottom:10px; }
    body.fit-screen .studio-shell{
      height:calc(100vh - 118px);
      overflow:hidden;
    }
    body.fit-screen .studio-col{
      overflow-x:hidden; overflow-y:auto; max-height:100%;
      padding-bottom:72px; scrollbar-width:thin;
      -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    }
  }
  /* Always allow nested pickers to scroll even if the column is constrained */
  body.fit-screen .style-grid,
  body.fit-screen .voice-scroll{
    -webkit-overflow-scrolling:touch;
  }
}