/* ============================================================
   TechSyntar Suite — Mail · Calendar · Contacts
   One stylesheet, no build step, no framework.
   ============================================================ */
:root{
  --bg:#f7f7fb; --card:#fff; --ink:#1c1b1a; --muted:#6b6f7b;
  --navy:#0A1A2F; --blue:#8A6D2E; --red:#c0392b; --green:#2f7d52;
  --line:rgba(28,27,26,.13);
  --r:14px;
  --sh-sm:0 2px 8px rgba(10,26,47,.07);
  --sh-md:0 10px 26px rgba(10,26,47,.11);
  --sh-lg:0 22px 50px rgba(10,26,47,.16);
  --head:"Playfair Display",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;
  -webkit-font-smoothing:antialiased;}
h1,h2{margin:0;font-weight:800;}
a{color:var(--navy);}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--body);font-weight:700;font-size:.95rem;line-height:1.4;
  padding:.62em 1.15em;border:none;border-radius:11px;cursor:pointer;white-space:nowrap;
  min-height:40px;transition:filter .13s ease,background .13s ease,transform .13s ease;}
.btn--sm{font-size:.86rem;padding:.5em .9em;min-height:36px;}
.btn--block{width:100%;}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 3px 0 #8A6D2E;}
.btn--primary:hover{filter:brightness(1.05);}
.btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 #8A6D2E;}
.btn--ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--ghost:hover{background:rgba(200,164,92,.07);}
.btn.is-danger,.btn--ghost.is-danger{color:var(--red);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.8rem;
  color:var(--navy);margin-bottom:12px;}
.field .hint{color:var(--muted);font-weight:600;}
.field input,.field select,.field textarea,textarea{font-family:var(--body);font-size:.98rem;
  font-weight:500;color:var(--ink);padding:.66em .85em;border:1.5px solid var(--line);
  border-radius:11px;background:#fff;width:100%;min-width:0;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(200,164,92,.16);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.check{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600;
  color:var(--ink);margin:4px 0 12px;cursor:pointer;}
.check input{width:17px;height:17px;accent-color:var(--blue);}
.hint{font-size:.85rem;color:var(--muted);line-height:1.5;margin:0 0 10px;}
.msg{font-size:.85rem;font-weight:700;color:var(--muted);}
.msg.is-bad{color:var(--red);}
.msg.is-ok{color:var(--green);}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
.search{font-family:var(--body);font-size:.9rem;padding:.5em .8em;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;min-width:0;flex:1 1 180px;}
.search:focus{outline:none;border-color:var(--blue);}

/* ---------- sign in ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(60% 60% at 80% 10%,rgba(200,164,92,.10),transparent 70%),var(--bg);}
.login__card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--sh-lg);padding:32px 30px 24px;}
.login__brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.login__brand img{width:46px;height:46px;border-radius:12px;}
.login__brand span{display:flex;flex-direction:column;line-height:1.1;}
.login__brand strong{font-family:var(--head);font-size:1.15rem;color:var(--navy);}
.login__brand em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--blue);}
.login h1{font-family:var(--head);font-size:1.9rem;color:var(--navy);}
.login__sub{color:var(--muted);margin:8px 0 20px;font-size:.96rem;}
.login__note{font-size:.8rem;color:var(--muted);text-align:center;margin:16px 0 0;line-height:1.5;}
.pw{position:relative;display:block;}
.pw input{padding-right:2.8em;}
.pw__eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;
  background:none;cursor:pointer;font-size:1rem;padding:9px;opacity:.65;min-height:44px;}
.pw__eye:hover{opacity:1;}
.steps{margin:0 0 4px;padding-left:20px;color:var(--muted);font-size:.9rem;line-height:1.65;}
.steps b{color:var(--navy);}

/* ---------- shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:10px 18px;background:linear-gradient(180deg,#0A1A2F,#18215a);color:#fff;
  box-shadow:var(--sh-md);}
.bar__brand{display:flex;align-items:center;gap:9px;font-family:var(--head);font-size:1.05rem;
  flex:0 0 auto;white-space:nowrap;}
.bar__brand img{width:34px;height:34px;border-radius:9px;}
.tabs{display:flex;gap:3px;margin-left:8px;flex:0 1 auto;min-width:0;flex-wrap:wrap;}
.tab{font-family:var(--body);font-weight:700;font-size:.92rem;color:#C4CFDB;background:none;
  border:none;padding:9px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;}
.tab:hover{background:rgba(255,255,255,.13);color:#fff;}
.tab.is-on{background:#fff;color:var(--navy);}
.bar__me{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 1 auto;min-width:0;}
.who{font-size:.86rem;color:#dfe3f4;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:24ch;min-width:0;}
.bar__me .btn--ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}
.bar__me .btn--ghost:hover{background:rgba(255,255,255,.28);}
.burger{display:none;width:42px;height:42px;border:none;border-radius:11px;
  background:rgba(255,255,255,.14);cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;flex:0 0 auto;}
.burger span{width:20px;height:2.5px;background:#fff;border-radius:2px;transition:.2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.scrim{position:fixed;inset:0;background:rgba(10,14,30,.5);z-index:18;}

.panel{flex:1;padding:20px clamp(14px,3vw,32px) 56px;max-width:1360px;width:100%;margin:0 auto;}
.view{display:none;}
.view.is-on{display:block;}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--sh-sm);min-width:0;}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.card__head h2{font-family:var(--head);font-size:1.2rem;color:var(--navy);flex:0 0 auto;}
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:18px;
  align-items:start;}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:14px;
  margin-bottom:14px;border-bottom:1px solid var(--line);}

/* ---------- mail ---------- */
.drawer-btn{display:none;}
.ml{display:grid;grid-template-columns:232px minmax(0,1fr);gap:18px;align-items:start;}
.ml__side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-sm);}
.boxes{display:flex;flex-direction:column;gap:3px;margin:6px 0 14px;}
.box{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--body);font-weight:700;font-size:.9rem;color:var(--ink);
  background:none;border:none;border-left:4px solid transparent;
  padding:10px 11px;border-radius:9px;cursor:pointer;text-align:left;min-height:42px;}
.box:hover{background:rgba(200,164,92,.07);}
.box b{font-weight:800;font-size:.78rem;color:var(--muted);}
.box.is-on{background:rgba(200,164,92,.10);color:var(--navy);border-left-color:var(--blue);}
.box.is-on b{color:var(--blue);}
.box[data-box="spam"].is-on{border-left-color:#d98324;}
.box[data-box="trash"].is-on{border-left-color:var(--muted);}

.mrow{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:11px;align-items:start;
  padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;}
.mrow:last-child{border-bottom:none;}
.mrow:hover{background:rgba(200,164,92,.04);}
.mrow__i{font-size:1rem;color:var(--muted);line-height:1.3;}
.mrow.is-unread .mrow__i{color:var(--blue);}
.mrow__b{min-width:0;}
.mrow__t{display:flex;gap:8px;align-items:baseline;min-width:0;}
/* overflow:hidden and text-overflow do not apply to an inline box, so these
   must be blocks or the text lays out at full intrinsic width and escapes
   the row — badly on a phone */
.mrow__who,.mrow__s,.mrow__p{display:block;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mrow__who{font-weight:700;font-size:.92rem;color:var(--ink);}
.mrow.is-unread .mrow__who{color:var(--navy);}
.mrow__s{font-size:.9rem;color:var(--ink);margin-top:2px;}
.mrow.is-unread .mrow__s{font-weight:700;}
.mrow__p{font-size:.82rem;color:var(--muted);margin-top:2px;}
.mrow__d{font-size:.78rem;color:var(--muted);font-weight:600;white-space:nowrap;}

.subject{font-family:var(--head);font-size:1.5rem;color:var(--navy);margin-bottom:8px;
  overflow-wrap:anywhere;}
.meta{font-size:.86rem;color:var(--muted);padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--line);line-height:1.6;}
.meta b{color:var(--ink);}
.body{font-size:.98rem;line-height:1.65;max-width:68ch;overflow-wrap:anywhere;}
.body img{max-width:100%;height:auto;border-radius:10px;}
.body blockquote{margin:12px 0;padding-left:14px;border-left:3px solid var(--line);
  color:var(--muted);}

.rows{display:flex;flex-direction:column;gap:1px;margin-bottom:14px;}
.row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);}
.row>span{flex:0 0 74px;font-size:.74rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);}
.row>b{font-size:.92rem;color:var(--navy);}
.row input{flex:1;border:none;padding:.3em 0;font-family:var(--body);font-size:.95rem;
  background:none;min-width:0;}
.row input:focus{outline:none;}
.tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px 10px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px 11px 0 0;
  border-bottom:none;}
.tools button{min-width:34px;height:34px;border:none;background:none;border-radius:8px;
  cursor:pointer;font-size:.92rem;color:var(--navy);display:inline-flex;
  align-items:center;justify-content:center;line-height:1.4;}
.tools button:hover{background:rgba(200,164,92,.12);}
.tools .sep{width:1px;height:22px;background:var(--line);margin:0 4px;}
.edit{min-height:260px;padding:16px;border:1px solid var(--line);border-radius:0 0 11px 11px;
  background:#fff;font-size:.98rem;line-height:1.65;overflow-wrap:anywhere;}
.edit:focus{outline:none;border-color:var(--blue);}

/* ---------- calendar ---------- */
.calswitch{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  padding:5px;border-radius:999px !important;background:linear-gradient(90deg,#2e1c3f,#4b1d7e);
  box-shadow:0 6px 18px rgba(46,28,63,.28);width:fit-content;max-width:100%;}
.calswitch__b{flex:0 0 auto;font:800 .84rem/1 var(--body);letter-spacing:.02em;cursor:pointer;
  color:rgba(255,255,255,.72);background:transparent;border:none !important;
  border-radius:999px !important;padding:11px 22px;transition:background .18s,color .18s;}
.calswitch__b:hover{color:#fff;background:rgba(255,255,255,.12);}
.calswitch__b.is-on{color:#2e1c3f;background:linear-gradient(180deg,#f2d472,#c9a227);
  box-shadow:0 2px 8px rgba(0,0,0,.22);}
.calswitch__note{font-size:.8rem;color:var(--muted);margin:0 0 16px;max-width:60ch;}
.dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:5px;}
.dows span{font-size:.66rem;font-weight:800;letter-spacing:.08em;color:var(--muted);
  padding-left:3px;}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
.cell{min-height:66px;border:1.5px solid var(--line);border-radius:0;background:#fff;
  text-align:left;padding:6px 7px;cursor:pointer;font-family:var(--body);
  display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.cell.pad{border:none;background:none;cursor:default;min-height:0;}
.cell b{font-weight:700;font-size:.86rem;color:var(--ink);}
.cell em{font-style:normal;font-size:.62rem;font-weight:700;color:var(--blue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.cell.has{background:rgba(200,164,92,.06);border-color:rgba(200,164,92,.28);}
.cell.today{outline:2px solid var(--navy);outline-offset:-2px;}
.cell.pick{box-shadow:0 0 0 3px rgba(200,164,92,.3);}
.dayp{margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);}
.dayp h3{font-family:var(--head);font-size:1.05rem;color:var(--navy);margin:0 0 10px;}
.ev{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-bottom:7px;}
.ev__t{font-family:var(--head);font-size:.95rem;color:var(--navy);min-width:52px;}
.ev__b{flex:1;min-width:0;}
.ev__b strong{display:block;font-size:.92rem;}
.ev__b span{font-size:.8rem;color:var(--muted);}
.ev__x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;
  padding:4px 7px;border-radius:7px;}
.ev__x:hover{background:#f7e2e0;color:var(--red);}

/* ---------- rows shared by contacts, mailboxes, team ---------- */
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 2px;border-bottom:1px solid var(--line);}
.item:last-child{border-bottom:none;}
.item__b{min-width:0;}
.item__b strong{display:block;font-size:.95rem;color:var(--ink);}
.item__b span{display:block;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere;}
.item__acts{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:rgba(10,26,47,.08);color:var(--navy);margin-right:4px;}
.tag.shared{background:#e4efdd;color:var(--green);}
.tag.owner{background:var(--red);color:#fff;}
.tag.admin{background:var(--blue);color:#fff;}
.empty{color:var(--muted);font-size:.9rem;margin:14px 0 0;padding:14px;
  border:1px dashed var(--line);border-radius:11px;}
.acct{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--line);}
.acct dt{color:var(--muted);font-size:.82rem;font-weight:700;}
.acct dd{margin:0;font-size:.9rem;font-weight:600;overflow-wrap:anywhere;}

/* ============================================================
   RESPONSIVE — an app on a phone, not a squeezed desktop
   ============================================================ */
@media (max-width:1180px){
  .tab{font-size:.86rem;padding:9px 11px;}
  .who{max-width:18ch;}
}
@media (max-width:1080px){
  .cols{grid-template-columns:1fr;}
  .who{display:none;}
}
@media (max-width:900px){
  .burger{display:flex;}
  .bar{gap:12px;padding:9px 14px;}
  .bar__brand span{display:none;}
  .who{display:none;}
  /* the tabs become a drawer: five buttons in a row is a scroll, not a nav */
  /* A fixed-height column flex container still carrying flex-wrap:wrap from
     the base rule wraps whatever overflows into a SECOND COLUMN. With the
     mailboxes folded in, the drawer is always taller than the screen, so the
     list appeared beside the sections instead of below them. It scrolls. */
  .tabs{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:19;margin:0;
    background:linear-gradient(180deg,#0A1A2F,#141c40);flex-direction:column;
    flex-wrap:nowrap;align-content:flex-start;
    padding:64px 12px 20px;overflow-y:auto;overflow-x:hidden;transform:translateX(-104%);
    transition:transform .26s ease;box-shadow:var(--sh-lg);}
  body.nav-on .tabs{transform:none;}
  .tab{width:100%;text-align:left;justify-content:flex-start;min-height:46px;font-size:.98rem;}

  /* mail: the mailbox list is a drawer, and a message takes the screen */
  .drawer-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;
    font-family:var(--body);font-weight:800;font-size:.92rem;color:var(--navy);
    background:#fff;border:1.5px solid var(--line);border-radius:12px;
    padding:0 14px;margin-bottom:12px;cursor:pointer;}
  .ml{grid-template-columns:1fr;gap:0;}
  .ml__side{position:fixed;top:0;left:0;bottom:0;width:264px;z-index:22;border-radius:0;
    overflow-y:auto;padding:18px 14px;transform:translateX(-104%);
    transition:transform .26s ease;box-shadow:var(--sh-lg);}
  body.mail-side-on .ml__side{transform:none;}
  body.reading #listCard,body.reading .drawer-btn{display:none;}

  .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .toolbar::-webkit-scrollbar{display:none;}
  .toolbar .btn{flex:0 0 auto;}
  .tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .tools::-webkit-scrollbar{display:none;}
  .tools button,.tools .sep{flex:0 0 auto;}
}
@media (max-width:620px){
  .panel{padding:14px 12px 48px;}
  .card{padding:14px;}
  .two{grid-template-columns:1fr;}
  .subject{font-size:1.22rem;}
  .mrow{grid-template-columns:20px minmax(0,1fr);}
  .mrow__d{grid-column:2;font-size:.74rem;}
  .row{flex-wrap:wrap;}
  .row>span{flex:1 0 100%;}
  .cell{min-height:54px;padding:5px;}
  .cell em{font-size:.55rem;}
  /* the primary action takes the width; alternatives share a row */
  .actions .btn{flex:1 1 calc(50% - 5px);}
  .actions .btn--primary{flex:1 1 100%;}
  .actions .msg{flex:1 0 100%;}
}
@media (max-width:520px){
  /* the month stays a month: numbers and a marker, the detail below it */
  .grid,.dows{gap:4px;}
  .cell{min-height:44px;padding:4px;align-items:flex-start;}
  .cell b{font-size:.8rem;}
  .cell em{display:none;}
  .cell.has::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);
    margin:2px 0 0 1px;}
  .calswitch{display:flex;width:100%;}
  .calswitch__b{flex:1 1 0;text-align:center;padding:11px 6px;font-size:.78rem;}
}
@media (max-width:380px){
  .grid,.dows{gap:3px;}
  .cell{min-height:38px;}
}
@media print{
  .bar,.tabs,.toolbar,.ml__side,.drawer-btn{display:none !important;}
  .card{box-shadow:none;border:none;}
}


/* ── Folders and bulk actions ─────────────────────────────── */
.folders { margin-top: 14px; }
.folders__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8a7a99; padding: 0 4px 6px;
}
.bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 16px 12px; border-radius: 14px;
  background: #f6f3fa; border: 1px solid #e6dff0;
}
.bulk__all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bulk__all input { width: 16px; height: 16px; accent-color: #4b1d7e; }
.bulk__hint { font-size: 13px; color: #8a7a99; }
.bulk__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk__acts select {
  padding: 8px 12px; border: 1px solid #ded4ea; border-radius: 999px;
  font-family: inherit; font-size: 13px; background: #fff; color: #3f3050;
}
.bulk.is-idle .bulk__acts { opacity: .45; pointer-events: none; }
.btn--danger { color: #a4344a; border-color: #edd3d0; }
.mrow__c { display: flex; align-items: center; padding-right: 4px; }
.mrow__c input { width: 16px; height: 16px; accent-color: #4b1d7e; }
.mday {
  padding: 9px 18px; background: #faf8fc; border-top: 1px solid #efe9f5; border-bottom: 1px solid #efe9f5;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a7a99;
}


/* the row now carries a tick column, so the grid gains a track */
.mrow { grid-template-columns: 22px 24px minmax(0, 1fr) auto; }
.mrow__c { align-items: start; padding-top: 2px; }
@media (max-width: 720px) {
  .mrow { grid-template-columns: 22px 20px minmax(0, 1fr); }
  .mrow__d { grid-column: 3; }
}


/* compose extras */
.tools select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .82rem; background: #fff;
}
.inks { display: inline-flex; gap: 6px; align-items: center; }
.inks button {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15);
  cursor: pointer; padding: 0;
}


/* Every control sits inside its column: a datetime input's intrinsic width
   is wider than a half-column, so the track must be allowed to shrink and
   the border counted inside the width. */
.field input, .field select, .field textarea, textarea, input, select { box-sizing: border-box; max-width: 100%; }
.two { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.two > .field { min-width: 0; }
@media (max-width: 560px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .field input, .field select, .field textarea { font-size: .94rem; padding: .6em .7em; }
}


/* paging and the storage strip */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pager__at { font-size: 13px; color: var(--muted); font-weight: 600; }
.usage { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.usage__t { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.usage__track { display: block; height: 7px; border-radius: 999px; background: #ece7f2; overflow: hidden; }
.usage__fill { display: block; height: 100%; border-radius: 999px; background: #4b1d7e; width: 0; }
.usage.is-warn .usage__fill { background: #c9a227; }
.usage.is-full .usage__fill { background: #a4344a; }
.usage__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.usage.is-warn .usage__note { color: #8a6612; font-weight: 600; }
.usage.is-full .usage__note { color: #a4344a; font-weight: 700; }


/* ── The look-around banner (demo.js only) ────────────────── */
.demo-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px clamp(14px, 3vw, 26px);
  background: #241033; color: #f3ead6;
  font-size: 13.5px; line-height: 1.5;
  border-bottom: 1px solid #4b1d7e;
}
.demo-bar b { color: #e0c26a; font-weight: 700; }
.demo-bar button {
  margin-left: auto; flex: none;
  padding: 8px 18px; border: 1px solid #6f36a9; border-radius: 999px;
  background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.demo-bar button:hover { background: #3a2050; }