/* TWS Author Portal — shared stylesheet
   Built from the approved Claude Design handoff (18 Aug 2026).
   Palette and type from design-system/tokens/. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@400;500;600;700&display=swap');

:root{
  --teal-900:#0B2833; --teal-800:#103948; --teal-700:#1A4E5F; --teal-200:#A9C4CC;
  --linen:#F6EFE1; --linen-2:#EFE6D3; --paper:#FBF8F1; --sand:#E6DCC6;
  --ink:#12262E; --ink-soft:#33474E; --ink-muted:#5F7077;
  --brass:#D4AF69; --brass-600:#B8933F; --rust:#7C3B34;
  --success:#3F7D5F; --warning:#C98A3F; --danger:#B23B30;
  --border:rgba(16,57,72,.14); --border-strong:rgba(16,57,72,.28);
  --focus:rgba(212,175,105,.55);
  --display:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,sans-serif;
  --sidebar:264px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--linen); color:var(--ink);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-700)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

/* ---------- shared label / figure type ---------- */
.label{
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-muted);
}
.fig{font-family:var(--display); font-weight:600; line-height:1; letter-spacing:.005em}
.fig-xl{font-size:52px} .fig-lg{font-size:34px} .fig-md{font-size:26px}
.muted{color:var(--ink-muted)} .soft{color:var(--ink-soft)}
.tiny{font-size:12px}

/* ---------- app shell ---------- */
.app{display:flex; min-height:100vh}

.side{
  width:var(--sidebar); flex:0 0 var(--sidebar); background:var(--teal-800);
  color:var(--linen); display:flex; flex-direction:column; padding:30px 0;
  position:sticky; top:0; height:100vh;
}
.side .brand{display:flex; align-items:baseline; gap:9px; padding:0 30px}
.who-mob{display:none}
.side .brand .tws{font-family:var(--display); font-weight:700; font-size:26px; line-height:1; color:#F6EFE1}
.side .brand .tws .dot{color:var(--brass)}
.side .brand .sub{font-size:8.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--teal-200)}
.side .kicker{padding:16px 30px 0; font-size:9px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass)}

.nav{margin-top:40px; display:flex; flex-direction:column}
.nav a{
  padding:11px 30px; color:rgba(246,239,225,.72); text-decoration:none;
  font-size:14px; font-weight:500; border-left:3px solid transparent;
  transition:color .15s ease, background .15s ease;
}
.nav a:hover{color:#F6EFE1; background:rgba(246,239,225,.05)}
.nav a[aria-current="page"]{color:#F6EFE1; font-weight:600; border-left-color:var(--brass)}

.side .foot{margin-top:auto; padding:22px 30px 0; border-top:1px solid rgba(246,239,225,.16)}
.side .foot .who{font-family:var(--display); font-size:19px; color:#F6EFE1}
.side .foot .meta{font-size:9px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal-200); margin-top:3px}
.side .foot a{display:inline-block; margin-top:14px; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(246,239,225,.6); text-decoration:none}
.side .foot a:hover{color:var(--brass)}

.main{flex:1; min-width:0; padding:46px 56px 80px; max-width:1180px}

/* ---------- page head ---------- */
.eyebrow{font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-muted)}
h1{font-family:var(--display); font-size:44px; font-weight:600; line-height:1.1; margin:10px 0 0}
.lede{margin-top:12px; color:var(--ink-soft); max-width:56ch}
.synced{margin-top:14px; font-size:12px; color:var(--ink-muted); display:flex; align-items:center; gap:7px}
.synced::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success)}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--border); border-radius:2px;
  padding:32px 34px; margin-top:26px;
}
.card-top{display:flex; gap:32px; align-items:flex-start}
.card-info{flex:1 1 auto; min-width:0}
/* Cover pinned right, cropped from the CENTRE.
   align-self:stretch makes its height track the left column, so its bottom
   lands level with the three figures — no hard-coded height to drift. */
/* ⛔ NO CROPPING. The catalogue has three different cover shapes —
   ~0.79 (most titles), ~1.00 (newer square mockups), 0.67 (Metamorphosis).
   No single frame fits them all, so the image keeps its own proportions:
   fixed width, natural height. Nothing is ever cut off or letterboxed. */
.cover{
  /* native ratio preserved — width AND height are only limits, so the image
     scales inside the box without ever being cropped or stretched */
  max-width:250px; max-height:300px; width:auto; height:auto;
  flex:0 0 auto; align-self:flex-start; object-fit:contain;
  background:var(--linen-2); border:1px solid var(--border); display:block;
  box-shadow:0 2px 12px rgba(16,57,72,.12);
}
h2{font-family:var(--display); font-size:29px; font-weight:600; line-height:1.15}
.role{margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.role .label{letter-spacing:.16em}
.tag{
  display:inline-block; font-size:9px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-600);
  border:1px solid var(--brass); border-radius:2px; padding:3px 8px;
}
.pending{text-align:left; margin-top:20px}
.pending .fig{color:var(--brass-600); display:block; margin-top:6px}
.pending .rule{height:1px; background:var(--brass); opacity:.55; margin-top:12px; max-width:320px}

/* three figures, left-aligned, inside the left column beneath the pending figure */
.stats{display:flex; gap:44px; flex-wrap:wrap;
  margin-top:26px; padding-top:24px; border-top:1px solid var(--border)}
.stat{text-align:left}
.stat .fig{margin-top:8px; display:block}
.stat .sub{font-size:12px; color:var(--ink-muted); margin-top:4px}

.rates{display:flex; background:var(--linen-2); margin-top:26px; border:1px solid var(--border)}
.rate{flex:1; padding:16px 20px; border-right:1px solid var(--border)}
.rate:last-child{border-right:0}
.rate .amt{font-family:var(--display); font-size:23px; font-weight:600; margin-top:7px; display:block}
.rate .na{color:var(--ink-muted)}
.rate .sub{font-size:11px; color:var(--ink-muted); margin-top:2px}

/* ---------- rate history, on the author's book card ---------- */
.ratehist{margin-top:22px; padding:16px 18px; background:var(--linen-2); border:1px solid var(--border)}
.ratehist ul{list-style:none; margin:10px 0 0}
.ratehist li{padding:11px 0; border-top:1px solid var(--border); display:flex; flex-wrap:wrap;
  align-items:baseline; gap:4px 14px}
.ratehist li:first-child{border-top:0; padding-top:4px}
.rh-date{font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; min-width:112px}
.rh-move{font-size:13.5px; color:var(--ink-soft)}
.rh-move strong{color:var(--ink); white-space:nowrap}
.rh-why{font-size:12px; color:var(--ink-muted); flex-basis:100%}
.rh-note{margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  font-size:12px; color:var(--ink-muted); max-width:70ch}
@media (max-width:760px){
  .ratehist{padding:14px}
  .rh-date{min-width:0; flex-basis:100%}
  .rh-move{font-size:13px}
}

.next{margin-top:28px; padding-top:24px; border-top:1px solid var(--border)}
.next p{margin-top:9px; max-width:60ch}
.next .keyval{font-weight:700; color:var(--ink); white-space:nowrap}
.bar{height:3px; background:var(--sand); margin-top:18px; max-width:340px; position:relative}
.bar span{position:absolute; inset:0 auto 0 0; background:var(--brass)}
.bar-note{font-size:11px; color:var(--ink-muted); margin-top:8px}
.card-actions{margin-top:22px; display:flex; justify-content:flex-end}
.linkcta{font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-700); text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:3px}
.linkcta:hover{color:var(--ink)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap}
.tab{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--border); background:var(--paper);
  color:var(--ink-soft); text-decoration:none; border-radius:2px;
}
.tab:hover{background:var(--linen-2)}
.tab[aria-current="true"]{background:var(--teal-800); border-color:var(--teal-800); color:#F6EFE1}

/* ---------- table ---------- */
.panel{background:var(--paper); border:1px solid var(--border); margin-top:22px; padding:8px 30px 26px}
table{width:100%; border-collapse:collapse}
thead th{
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); text-align:left; padding:20px 14px 12px;
  border-bottom:1px solid var(--brass);
}
tbody td{padding:16px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle}
tbody tr:nth-child(even){background:var(--linen-2)}
.num{text-align:right; font-variant-numeric:tabular-nums}
.center{text-align:center}
tr.void td{color:var(--ink-muted); text-decoration:line-through}
tr.void td.keep{text-decoration:none}
.chip{
  display:inline-block; font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--danger); border:1px solid var(--danger); border-radius:2px; padding:2px 7px; text-decoration:none;
}
.chip.ok{color:var(--success); border-color:var(--success)}
tfoot td{padding:20px 14px 6px; border-top:2px solid var(--brass); font-weight:600}
tfoot .fig{font-size:21px}
.legend{margin-top:16px; font-size:12px; color:var(--ink-muted)}

/* ---------- prose (Help) ---------- */
.prose{max-width:64ch; margin-top:30px}
.prose h3{font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-muted); margin:38px 0 12px}
.prose p{font-family:var(--display); font-size:19px; line-height:1.62; margin-bottom:16px; color:var(--ink-soft)}
.prose p strong{color:var(--ink); font-weight:600}
.prose a{color:var(--teal-700)}

/* ---------- login ---------- */
.login{display:flex; min-height:100vh}
.login .left{
  flex:1; background:var(--teal-800); color:#F6EFE1; padding:46px 56px;
  display:flex; flex-direction:column;
}
.login .left .mid{margin-top:auto; margin-bottom:auto; max-width:30ch}
.login .left h1{font-size:clamp(34px,3.4vw,52px); color:#F6EFE1; font-weight:500; line-height:1.08}
.login .left .kicker{font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:20px}
.login .left .dash{width:56px; height:1px; background:var(--brass); margin:28px 0 20px}
.login .left p{color:rgba(246,239,225,.72); font-size:14px; max-width:34ch}
.login .left .base{font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(246,239,225,.45)}
.login .right{flex:1; display:flex; align-items:center; padding:46px 56px; background:var(--linen)}
.form{width:100%; max-width:400px}
.form h2{font-size:38px; margin-bottom:10px}
.form .intro{color:var(--ink-soft); font-size:14px; margin-bottom:30px}
.field{margin-bottom:20px}
.field label{display:block; margin-bottom:8px}
.field input{
  width:100%; padding:14px 16px; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--border-strong); border-radius:2px;
}
.field input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--focus)}
.btn{
  width:100%; padding:15px; background:var(--teal-800); color:#F6EFE1; border:0; border-radius:2px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer;
}
.btn:hover{background:var(--teal-900)}
.form .helprow{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:14px; flex-wrap:wrap}
.form .helprow a{font-size:12px}
.form .note{margin-top:26px; padding-top:20px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--ink-muted); line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:960px){
  /* The sidebar dissolves so its parts can be reordered independently:
     brand + nav stay at the top; the account block moves to the very bottom.
     Keeps the header to two tidy bands instead of four. */
  .app{flex-direction:column; min-height:100vh}
  .side{display:contents}

  .side .brand{order:1; background:var(--teal-800); padding:20px 20px 14px; margin:0}
  .side .kicker{display:none}

  .nav{order:2; margin:0; flex-direction:row; overflow-x:auto;
    background:var(--teal-800); padding:0 20px;
    border-bottom:1px solid rgba(246,239,225,.16)}
  .nav a{padding:12px 0; margin-right:26px; border-left:0;
    border-bottom:2px solid transparent; white-space:nowrap}
  .nav a[aria-current="page"]{border-left:0; border-bottom-color:var(--brass)}

  .main{order:3; flex:1}

  /* account block — now a quiet footer at the foot of the page */
  .side .foot{
    order:4; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px 18px; margin:0; padding:18px 20px;
    background:var(--teal-800); border-top:0;
  }
  /* the author's name moves to the top band; the meta line is dropped on mobile */
  .who-mob{
    display:block; margin-left:auto; align-self:baseline;
    font-family:var(--display); font-size:17px; color:#F6EFE1; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:52%;
  }
  .side .foot .who,
  .side .foot .meta{display:none}
  .side .foot a{margin-top:0; margin-right:0}
  .main{padding:30px 20px 60px}
  h1{font-size:34px}
  .card{padding:24px 20px}
  .pending{text-align:left; width:100%}
  .pending .rule{min-width:0}
  .stats{gap:26px}
  /* the three format rates stay on ONE row */
  .rates{flex-direction:row}
  .rate{padding:12px 10px; border-right:1px solid var(--border); border-bottom:0}
  .rate:last-child{border-right:0}
  .rate .label{font-size:9px; letter-spacing:.08em}
  .rate .amt{font-size:17px}
  .rate .sub{font-size:9.5px}
  .login{flex-direction:column}
  .login .left{padding:30px 24px}
  .login .left h1{font-size:36px}
  .login .right{padding:34px 24px}
  .panel{padding:4px 16px 22px}
}

/* ---------- co-author discount code (never shown on solo titles) ---------- */
.codebox{margin-top:26px; padding:20px 22px; background:var(--linen-2); border:1px solid var(--border);
  border-left:3px solid var(--brass)}
.coderow{display:flex; gap:22px; align-items:center; margin-top:12px; flex-wrap:wrap}
.codebox .code{
  font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:.06em;
  color:var(--ink); background:var(--paper); border:1px dashed var(--brass-600);
  padding:8px 18px; white-space:nowrap;
}
.codebox p{font-size:13.5px; color:var(--ink-soft); flex:1; min-width:240px; margin:0}
@media (max-width:960px){ .codebox .code{font-size:23px} }

/* ---------- royalty share percentage ---------- */
.share{margin-top:26px; padding-top:24px; border-top:1px solid var(--border)}
.sharerow{display:flex; align-items:baseline; gap:18px; margin-top:10px; flex-wrap:wrap}
.share .pct{font-family:var(--display); font-size:38px; font-weight:600; line-height:1; color:var(--teal-700)}
.share p{font-size:13.5px; color:var(--ink-soft); flex:1; min-width:260px; margin:0}
.rates{margin-top:16px}
@media (max-width:960px){ .share .pct{font-size:32px} }

/* two footer links side by side */
.side .foot a{margin-right:16px}
.side .foot a + a{margin-right:0}

/* =========================================================
   MOBILE — tables stay TABLES: one row per order, no cards,
   no sideways scrolling. Secondary columns fold into the
   primary cell via .submob.
   ========================================================= */
.submob{display:none}

@media (max-width:760px){
  table{min-width:0; width:100%; table-layout:fixed}
  .panel{padding:4px 14px 20px}

  /* fold secondary columns away — their values reappear via .submob.
     Which columns are secondary differs per table.
     ⛔ Sales also folds COPIES (5) away, because Status (7) is a visible
     column on mobile and the remaining widths below must still total 100%.
     Leaving Status without a width squeezed it to one character and the
     chip rendered a letter per line, which is what made rows enormous. */
  .t-sales thead th:nth-child(2), .t-sales tbody td:nth-child(2),
  .t-sales thead th:nth-child(4), .t-sales tbody td:nth-child(4),
  .t-sales thead th:nth-child(5), .t-sales tbody td:nth-child(5){display:none}

  .t-pay thead th:nth-child(3), .t-pay tbody td:nth-child(3),
  .t-pay thead th:nth-child(4), .t-pay tbody td:nth-child(4){display:none}

  .submob{
    display:block; font-size:11px; color:var(--ink-muted);
    margin-top:3px; letter-spacing:.02em;
  }

  thead th{font-size:9px; letter-spacing:.1em; padding:15px 4px 9px}
  tbody td{padding:11px 4px; font-size:13px; vertical-align:top; word-break:break-word}
  /* totals row: flex, so colspan no longer fights the hidden columns */
  tfoot td{padding:16px 4px 6px}
  /* tfoot has the same cells as tbody, so hide the same columns */
  .t-sales tfoot td:nth-child(2), .t-sales tfoot td:nth-child(4),
  .t-sales tfoot td:nth-child(5),
  .t-pay   tfoot td:nth-child(3), .t-pay   tfoot td:nth-child(4){display:none}
  tfoot .fig{font-size:15px; white-space:nowrap}
  tfoot .label{letter-spacing:.08em; white-space:nowrap}

  /* sales: date / customer / royalty / status — MUST total 100% */
  .t-sales thead th:nth-child(1), .t-sales tbody td:nth-child(1){width:26%; white-space:nowrap}
  .t-sales thead th:nth-child(3), .t-sales tbody td:nth-child(3){width:31%}
  .t-sales thead th:nth-child(6), .t-sales tbody td:nth-child(6){width:22%}
  .t-sales thead th:nth-child(7), .t-sales tbody td:nth-child(7){width:21%; padding-left:2px; padding-right:2px}
  .t-sales tbody td:nth-child(1) .submob{white-space:normal}

  /* a long buyer name gets two lines, then stops — the row height is what
     drives how much scrolling an author does through hundreds of orders */
  .cname{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.35;
  }

  /* payments: date / title / amount / status */
  .t-pay thead th:nth-child(1), .t-pay tbody td:nth-child(1){width:26%}
  .t-pay thead th:nth-child(2), .t-pay tbody td:nth-child(2){width:32%}
  .t-pay thead th:nth-child(5), .t-pay tbody td:nth-child(5){width:24%}
  .t-pay thead th:nth-child(6), .t-pay tbody td:nth-child(6){width:18%}

  tr.void td{text-decoration:none}
  tr.void td:nth-child(1), tr.void td:nth-child(3),
  tr.void td:nth-child(6){text-decoration:line-through}
  tr.void .submob{text-decoration:none}
  /* the chip must never wrap — a wrapped chip sets the row height */
  .chip{
    margin-top:0; display:inline-block; white-space:nowrap;
    font-size:8px; letter-spacing:.05em; padding:3px 5px;
  }
  td .submob .chip{margin-top:3px}
  tfoot .fig{font-size:17px}
}

@media (max-width:960px){
  /* --- stats read as a tidy 2-up grid, not ragged wrapping --- */
  .fig-lg{font-size:29px} .fig-md{font-size:23px} .fig-xl{font-size:40px}

  /* --- headline + card breathing room --- */
  .main{padding:26px 18px 56px}
  h1{font-size:31px; line-height:1.15}
  .lede{font-size:14.5px}
  .card{padding:22px 18px; margin-top:20px}
  h2{font-size:24px}

  /* --- book cover + title sit together neatly --- */
  /* mobile: title sits beside the cover; pending and the figures run full width */
  /* grid so the cover can span the title AND pending rows — as a plain flex row
     the taller cover left a ~110px hole above "Pending payment" */
  .card-top{position:static; padding-right:0; min-height:0;
    display:grid; grid-template-columns:minmax(0,1fr) 96px;
    column-gap:16px; row-gap:8px; align-items:start}
  .card-info{display:contents}
  .card-top h2{grid-column:1; grid-row:1}
  .cover{grid-column:2; grid-row:1 / span 2; max-width:96px; max-height:130px;
    align-self:start; justify-self:end}
  .card-top .role{grid-column:1; margin-top:0}
  .card-top .pending{grid-column:1; margin-top:6px}
  .card-top .stats{grid-column:1 / -1;
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .card-top .stats .fig-lg{font-size:19px}
  .card-top .stats .fig-md{font-size:17px}
  .card-top .stats .label{font-size:9px; letter-spacing:.1em}
  .card-top .stats .sub{font-size:10px}

  /* --- pending payment gets its own line, full width --- */
  .card-top{gap:18px}
  .pending{width:100%; text-align:left; padding-top:4px; border-top:1px solid var(--border)}
  .pending .rule{display:none}

  /* --- share % --- */
  .sharerow{gap:12px}
  .share p{min-width:0; font-size:13px}

  /* --- next payment --- */
  .next p{font-size:14.5px}
  .bar{max-width:none}

  /* --- code box: stack, don't squeeze the code into a narrow column --- */
  .codebox{padding:16px}
  .coderow{flex-direction:column; align-items:flex-start; gap:12px}
  .codebox .code{width:100%; text-align:center; box-sizing:border-box}
  .codebox p{min-width:0; font-size:13px}

  /* --- tabs scroll rather than squash --- */
  .tabs{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap; flex:0 0 auto}

  /* --- prose --- */
  .prose p{font-size:17px}
  .prose h3{margin-top:30px}

  /* --- account form --- */
  .card form .field input{font-size:16px}  /* 16px stops iOS zooming on focus */

  /* --- sidebar footer: name and links stack cleanly --- */
  .side .foot{flex-wrap:wrap; row-gap:8px}
  .side .foot .who{font-size:17px}
}

@media (max-width:430px){
  h1{font-size:26px}
  /* keep two columns — one-per-row made the card needlessly tall */
  .fig-xl{font-size:32px}
  .fig-lg{font-size:24px}
  .fig-md{font-size:20px}
  .stats{gap:18px 14px}
  .stat .sub{font-size:11px}
  .share .pct{font-size:28px}
  .codebox .code{font-size:20px; padding:7px 14px}
  .nav a{margin-right:20px; font-size:13.5px}
  .card{padding:20px 16px}
  h2{font-size:22px}
  .pending{padding-top:2px}
  /* ⛔ keep the horizontal padding — `padding:9px 0` here previously wiped the
     gap set at 760px, so the date ran straight into the buyer's name. */
  tbody td{padding:9px 3px; font-size:12.5px}
  thead th{padding:14px 3px 8px}
  tfoot td{padding:14px 3px 6px}
}

/* iPhone SE and older Androids: 320px leaves the date and the status chip
   a few pixels short, so claw the space back from the page gutters. */
@media (max-width:360px){
  .main{padding:26px 12px 56px}
  .panel{padding:4px 10px 18px}
  tbody td{padding:9px 2px; font-size:12px}
  thead th{font-size:8.5px; letter-spacing:.07em; padding:14px 2px 8px}
  .t-sales tbody td:nth-child(1){font-size:11.5px}
  .chip{font-size:7.5px; letter-spacing:.03em; padding:3px 4px}
  .submob{font-size:10.5px}
}

/* only genuinely tiny screens go single-column */
@media (max-width:340px){
  .stats{grid-template-columns:1fr}
}

/* ---------- form messages + sign-out button ---------- */
.formerror,.formok{
  font-size:13.5px; padding:12px 14px; margin-bottom:20px; border-radius:2px;
  border:1px solid var(--danger); color:var(--danger); background:rgba(178,59,48,.06);
}
.formok{border-color:var(--success); color:var(--success); background:rgba(63,125,95,.07)}
.linkout{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,239,225,.6);
}
.linkout:hover{color:var(--brass)}
@media (max-width:960px){ .side .foot .linkout{font-size:10px} }

/* ---------- pagination ---------- */
.pager{display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:20px; flex-wrap:wrap}
.pager .count{font-size:12px; color:var(--ink-muted)}
.pager .links{display:flex; gap:10px}
.pager a, .pager span.off{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--border); background:var(--paper);
  color:var(--teal-700); text-decoration:none; border-radius:2px;
}
.pager a:hover{background:var(--linen-2)}
.pager span.off{color:var(--ink-muted); opacity:.45}

/* ---------- account / password page: centred column ---------- */
.acct{max-width:520px; margin:0 auto; text-align:center}
.acct .lede{max-width:none; margin-left:auto; margin-right:auto}
.acct .card{text-align:left}          /* the form itself stays left-aligned to read properly */
.acct .note{text-align:center}
.acct .btn{margin-top:4px}
@media (max-width:960px){ .acct{max-width:none} }

/* =========================================================
   ADMIN PANEL — deliberately denser and plainer than the
   author portal. It is a working tool, not a showpiece.
   ========================================================= */
.side.admin{background:var(--teal-900)}
.side.admin .kicker{color:var(--rust-200)}
.adminbar{background:var(--rust); color:#F6EFE1; padding:9px 22px; font-size:11px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; display:flex;
  justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.adminbar a{color:#F6EFE1}

.a-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:24px}
.a-tile{background:var(--paper); border:1px solid var(--border); padding:18px 20px}
.a-tile .fig{display:block; margin-top:8px; font-size:30px}
.a-tile.warn{border-left:3px solid var(--warning)}
.a-tile.ok{border-left:3px solid var(--success)}
.a-tile.bad{border-left:3px solid var(--danger)}

table.admin{width:100%; border-collapse:collapse; margin-top:8px}
table.admin thead th{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); text-align:left; padding:14px 10px 10px; border-bottom:1px solid var(--brass)}
table.admin td{padding:12px 10px; border-bottom:1px solid var(--border); font-size:13.5px}
table.admin tbody tr:hover{background:var(--linen-2)}
table.admin .num{text-align:right; font-variant-numeric:tabular-nums}

.pill{display:inline-block; font-size:9px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:2px; border:1px solid}
.pill.on{color:var(--success); border-color:var(--success)}
.pill.off{color:var(--ink-muted); border-color:var(--border-strong)}
.pill.due{color:var(--warning); border-color:var(--warning)}

.btn-sm{display:inline-block; font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 13px; border:1px solid var(--teal-800);
  background:var(--teal-800); color:#F6EFE1; text-decoration:none; border-radius:2px; cursor:pointer}
.btn-sm.ghost{background:transparent; color:var(--teal-800)}
.btn-sm.ghost:hover{background:var(--linen-2)}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin-top:18px}
.formgrid .field{margin:0}
.formgrid input, .formgrid select{width:100%; padding:11px 12px; font-family:var(--sans);
  font-size:15px; background:var(--paper); border:1px solid var(--border-strong); border-radius:2px}
.hint{font-size:11.5px; color:var(--ink-muted); margin-top:6px}
.section-h{margin-top:34px; padding-top:22px; border-top:1px solid var(--border)}
.section-h h2{font-size:22px}

/* ---------- admin: toolbar, bulk actions, search ---------- */
.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
.toolbar .search{flex:1 1 260px; min-width:200px; padding:11px 14px; font-family:var(--sans);
  font-size:15px; background:var(--paper); border:1px solid var(--border-strong); border-radius:2px}
.toolbar select{padding:11px 12px; font-family:var(--sans); font-size:14px;
  background:var(--paper); border:1px solid var(--border-strong); border-radius:2px}
.bulkbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--linen-2); border:1px solid var(--border); border-left:3px solid var(--brass);
  padding:12px 16px; margin-top:14px; font-size:13px}
.bulkbar strong{font-weight:600}
table.admin td.tick, table.admin th.tick{width:34px; padding-left:12px}
.never{color:var(--ink-muted); font-style:italic}
.rowacts{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end; white-space:nowrap}
table.admin td:last-child{width:1%; white-space:nowrap}
.btn-sm{white-space:nowrap}

/* ---------- admin view switcher ---------- */
.viewtabs{display:flex; gap:0; margin-top:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--border)}
.viewtabs a{
  padding:11px 18px; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.viewtabs a:hover{color:var(--ink)}
.viewtabs a.on{color:var(--ink); border-bottom-color:var(--brass)}

.chip.wait{color:var(--warning); border-color:var(--warning)}

/* ---------- rate changes (admin) ---------- */
.section-h h3.rate-h3{font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600}
table.admin.ratetable{font-size:13px}
table.admin.ratetable tr.future td{background:rgba(196,150,74,.07)}
.callout{
  margin-top:20px; padding:16px 18px; background:var(--linen-2);
  border:1px solid var(--border); border-left:3px solid var(--brass);
  font-size:14px; color:var(--ink-soft); max-width:80ch;
}
.callout strong{color:var(--ink)}

/* =========================================================
   ADMIN TABLES ON A PHONE
   The Authors list is 8 columns and Rate changes is 12. With no widths
   allocated they collapsed: headers overlapped, "A. Ibrahim" wrapped one
   letter per line, and the "No rate" pill rendered vertically — the same
   failure the author Sales table had, in a denser table.
   These are dense working tools, not reading pages, so let them scroll
   sideways inside their own box rather than fold columns away and hide data
   the admin came to see. display:block makes the table its own scroll
   container while thead/tbody still lay out as one table, so the columns
   stay lined up.
   ========================================================= */
@media (max-width:960px){
  table.admin{
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-width:100%; white-space:nowrap;
  }
  table.admin th, table.admin td{padding:10px 8px}
  /* the small grey second lines are prose — they may wrap */
  table.admin .hint{white-space:normal; min-width:120px}
  /* a pill must never break across lines — that is what produced the
     one-letter-per-line "N O   R A T E" column */
  table.admin .pill, table.admin .btn-sm{white-space:nowrap}
  /* free text (book lists, buyer names) wraps instead of forcing a 667px
     column — everything else stays on one line so nothing breaks mid-word */
  table.admin td.wrap{white-space:normal; min-width:130px; max-width:210px}
  table.admin td:last-child{white-space:nowrap}
  .rowacts{display:flex; gap:6px; flex-wrap:nowrap}
  /* a quiet hint that the table moves sideways */
  .panel-scrollnote{display:block; font-size:11px; color:var(--ink-muted); margin-top:6px}
}
.panel-scrollnote{display:none}