/* EditStock contributor portal
   Matched to editstock.com: Archivo Black for display and buttons, DM Sans for
   reading, #1f1f1f paper, #ed5023 accent, fully-rounded buttons. The store is
   dark for everyone, so this is too — a contributor should not feel they have
   arrived somewhere else. */

:root{
  --paper:#1f1f1f; --card:#262626; --ink:#ffffff; --muted:rgba(255,255,255,.60);
  --rule:rgba(255,255,255,.13); --rule-soft:rgba(255,255,255,.07);
  --accent:#ed5023; --accent-soft:rgba(237,80,35,.16);
  --good:#5fcf9b; --good-soft:rgba(95,207,155,.14);
  --warn:#f0a83c; --warn-soft:rgba(240,168,60,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px -28px rgba(0,0,0,.95);
  --display:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;
  --nav:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1080px;
  --tight:-0.03em;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--body);
     font-size:15.5px; font-weight:500; line-height:1.45; letter-spacing:-0.01em;
     -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.r{text-align:right}
.dim{color:var(--muted)}
.mono{font-family:var(--mono); font-size:.86em; letter-spacing:-.01em}
.strong{font-weight:600}


/* header ---------------------------------------------------------------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px;
     padding:14px 16px; border-bottom:1px solid var(--rule);
     background:var(--card); position:sticky; top:0; z-index:20}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.brand img{height:19px; width:auto; display:block; align-self:center}
.brand span{font-family:var(--display); font-weight:400; letter-spacing:.12em;
            text-transform:uppercase; font-size:13px; color:var(--muted)}
.who{display:flex; align-items:center; gap:10px; font-size:14px}
.who .em{color:var(--muted); max-width:30vw; overflow:hidden; text-overflow:ellipsis;
         white-space:nowrap}
.tag{font-family:var(--body); text-transform:uppercase; letter-spacing:.08em;
     font-size:10.5px; font-weight:700; color:#fff; background:var(--accent);
     padding:4px 10px; border-radius:60px}

/* buttons --------------------------------------------------------------- */
.btn{display:inline-block; font:400 14px/1 var(--display); letter-spacing:var(--tight);
     padding:11px 22px; border:1px solid transparent; border-radius:60px;
     background:var(--accent); color:#fff; cursor:pointer; text-decoration:none;
     white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--rule)}
.btn.ghost:hover{color:var(--ink); border-color:var(--muted); filter:none}
.btn.small{padding:9px 18px; font-size:13px}
.btn.tiny{padding:6px 14px; font-size:11.5px; border-radius:60px}
.btn.go{width:100%; padding:12px; font-size:15px; margin-top:16px}

input[type=email],input[type=text],input[type=number],input[type=search],textarea,select{
  font:500 15px/1.4 var(--body); color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--rule); border-radius:9px; padding:10px 12px; width:100%}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35)}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px;
  border-color:transparent}
label{display:block; font-family:var(--body); text-transform:uppercase;
      letter-spacing:.08em; font-size:11px; font-weight:700; color:var(--muted);
      margin:0 0 6px}

/* notices --------------------------------------------------------------- */
.notice{margin:16px 0 0; padding:12px 14px; border-radius:9px; font-size:14.5px;
        border:1px solid var(--rule); background:var(--card)}
.notice.ok{background:var(--good-soft); border-color:transparent; color:var(--good)}
.notice.bad,.notice.warn{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.notice.dev{background:var(--accent-soft); border-color:transparent}
.notice.dev a{font-family:var(--mono); font-size:12.5px; word-break:break-all}
.notice code{font-family:var(--mono); font-size:.9em}

/* the store's own header, for the page a contributor arrives on ---------- */
/* editstock.com runs an 80px bar on the same #1f1f1f, logo at the left, nav
   in Archivo 500 — so the portal opens looking like the shop, not like a
   different company's login screen. */
.bar.store{background:var(--paper); border-bottom:0; padding:18px 32px;
      min-height:80px; position:static}
@media (min-width:900px){.bar.store{padding:18px 64px}}   /* as the shop has it */
.bar.store .brand img{height:22px}
.storenav{display:flex; align-items:center; gap:26px}
.storenav a{font:500 16px/1 var(--nav); letter-spacing:var(--tight);
      color:var(--ink); text-decoration:none}
.storenav a:hover{color:var(--accent)}

/* sign in --------------------------------------------------------------- */
.signin-page{min-height:calc(100vh - 80px); display:flex; flex-direction:column;
             align-items:center; justify-content:center; padding:40px 16px 60px;
             gap:22px}
.signin-card{width:100%; max-width:430px; background:var(--card); padding:34px 30px;
             border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow)}
.signin-card .mark{height:22px; width:auto; display:block; margin-bottom:26px}
.signin-card h1{font-family:var(--display); font-size:32px; line-height:1.05;
                margin:0 0 10px; letter-spacing:var(--tight)}
.lede{margin:0 0 22px; color:var(--muted); font-size:15px}
/* the first line is the invitation, the second the instruction — they belong
   closer together than a paragraph break would put them */
.lede:first-of-type{margin-bottom:10px; color:var(--ink); font-size:17px}
.lede:first-of-type:last-of-type{margin-bottom:22px; color:var(--muted); font-size:15px}
.fine{margin:22px 0 0; padding-top:16px; border-top:1px solid var(--rule-soft);
      font-size:13px; color:var(--muted)}
.foot{font-size:13px; color:var(--muted); text-align:center; max-width:430px; margin:0}
.foot .sell{font:500 15px/1.4 var(--nav); letter-spacing:var(--tight);
      color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent);
      padding-bottom:2px}
.foot .sell:hover{color:var(--accent)}

/* page furniture -------------------------------------------------------- */
.portal,.admin{padding-top:30px; padding-bottom:70px}
.titlerow{display:flex; align-items:flex-end; justify-content:space-between;
          gap:20px; flex-wrap:wrap; margin-bottom:22px}
.eyebrow{font-family:var(--body); text-transform:uppercase; letter-spacing:.14em;
         font-size:11px; font-weight:700; color:var(--muted)}
h1.big{font-family:var(--display); font-size:42px; line-height:1.05; margin:6px 0 0;
       letter-spacing:var(--tight); font-weight:400}
.adminbox{background:var(--card); border:1px solid var(--rule); border-radius:10px;
          padding:10px 12px}
.adminbox input{min-width:230px}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px}
.stat{background:var(--card); border:1px solid var(--rule); border-radius:12px;
      padding:14px 16px}
.stat span{display:block; font-family:var(--body); text-transform:uppercase;
           letter-spacing:.09em; font-size:10.5px; font-weight:700; color:var(--muted)}
.stat b{font-family:var(--display); font-size:27px; font-weight:400; line-height:1.15;
        letter-spacing:var(--tight);
        display:block; margin-top:3px}

/* notes ----------------------------------------------------------------- */
.notes,.admin-panel{background:var(--card); border:1px solid var(--rule);
      border-left:3px solid var(--accent); border-radius:10px; padding:16px 18px;
      margin-bottom:22px}
.notes h2,.admin-panel h2{font-family:var(--display); font-size:17px; margin:0 0 10px;
      letter-spacing:var(--tight); color:var(--ink); font-weight:400}
.note{padding:8px 0; border-top:1px solid var(--rule-soft); position:relative}
.note:first-of-type{border-top:0}
.note .when{font-size:12px; color:var(--muted)}
.admin-panel textarea{margin-bottom:10px}

/* tabs and search ------------------------------------------------------- */
.tabs{display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--rule);
      margin-bottom:18px; flex-wrap:wrap}
.tab{font-family:var(--body); text-transform:uppercase; letter-spacing:.09em;
     font-size:12px; font-weight:700; color:var(--muted); background:none;
     border:0; border-bottom:2px solid transparent; padding:11px 13px; cursor:pointer}
.tab.on{color:var(--ink); border-bottom-color:var(--accent)}
.search{margin-left:auto; padding:6px 0 8px; min-width:250px}
.search.wide{margin:0 0 16px; max-width:380px}
.panel{display:none}
.panel.on{display:block}
.paneltip{color:var(--muted); font-size:14px; margin:0 0 16px}
.mutedp{color:var(--muted); margin:6px 0}

/* statements ------------------------------------------------------------ */
.stm{background:var(--card); border:1px solid var(--rule); border-radius:11px;
     margin-bottom:9px; overflow:hidden}
.stm.empty{opacity:.62}
.stm-head{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
          background:none; border:0; padding:15px 17px; cursor:pointer; color:inherit;
          font:inherit}
.stm-head:hover{background:var(--rule-soft)}
.stm-top{display:flex; align-items:center}
.stm-top .stm-head{flex:1; min-width:0}
.stm-pdf{flex:none; width:52px; margin-right:14px; text-align:center;
      font:700 10.5px/1 var(--body); letter-spacing:.07em; text-transform:uppercase;
      color:var(--accent); text-decoration:none; padding:7px 0; border-radius:60px;
      border:1px solid var(--rule)}
.stm-pdf:hover,.stm-pdf:focus{border-color:var(--accent); background:var(--accent-soft)}
.stm-pdf.none{border-color:transparent; background:none}
.chev{width:8px; height:8px; border-right:2px solid var(--muted);
      border-bottom:2px solid var(--muted); transform:rotate(-45deg);
      transition:transform .16s ease; flex:none; margin-right:2px}
.stm.open .chev{transform:rotate(45deg)}
.mo{font-family:var(--display); font-size:19px; font-weight:400; min-width:150px;
     letter-spacing:var(--tight)}
.stm-head .meta{font-size:13.5px; color:var(--muted); flex:1}
.amt{font-family:var(--display); font-size:20px; font-weight:400; min-width:100px;
     text-align:right; letter-spacing:var(--tight)}
.pill{font-family:var(--body); text-transform:uppercase; letter-spacing:.07em;
      font-size:10px; font-weight:700; padding:4px 10px; border-radius:60px;
      background:var(--rule-soft); color:var(--muted)}
.pill.paid{background:var(--good-soft); color:var(--good)}
.pill.due{background:var(--warn-soft); color:var(--warn)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.soft{background:var(--accent-soft); color:var(--accent)}
.pill.grey{background:var(--rule-soft); color:var(--muted)}
.stm-body{padding:0 17px 17px; border-top:1px solid var(--rule-soft)}

table.lines{width:100%; border-collapse:collapse; font-size:14px; margin-top:12px}
table.lines th{font-family:var(--body); text-transform:uppercase; font-size:10.5px;
      letter-spacing:.08em; color:var(--muted); font-weight:600; text-align:left;
      padding:7px 8px; border-bottom:1px solid var(--rule)}
table.lines td{padding:9px 8px; border-bottom:1px solid var(--rule-soft);
      vertical-align:top}
table.lines .sku{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
.code{font-family:var(--mono); font-size:10.5px; background:var(--accent-soft);
      color:var(--accent); padding:1px 5px; border-radius:4px; margin-left:4px}
tfoot .other td{color:var(--muted); font-size:13px; padding-top:11px}
tfoot .total td{font-family:var(--display); font-size:16px; font-weight:400;
      letter-spacing:var(--tight);
      border-top:1px solid var(--rule); border-bottom:0; padding-top:10px}
.corrected{font-size:13px; color:var(--warn); background:var(--warn-soft);
      padding:8px 11px; border-radius:7px; margin-top:12px}
.stm-foot{display:flex; align-items:center; gap:14px; margin-top:14px; font-size:13px;
      flex-wrap:wrap}
.admin-inline{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
      padding-top:12px; border-top:1px dashed var(--rule)}
.inline{display:flex; align-items:flex-end; gap:7px; flex-wrap:wrap}
.inline input{width:auto}
.inline label{margin:0 0 9px}
.right{position:absolute; right:0; top:6px}

/* films ----------------------------------------------------------------- */
.film{background:var(--card); border:1px solid var(--rule); border-radius:11px;
      padding:16px 18px; margin-bottom:10px}
.film-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.film h3{font-family:var(--display); font-size:21px; margin:0; font-weight:400;
      letter-spacing:var(--tight)}
.skus{list-style:none; padding:0; margin:7px 0 0; font-size:13.5px;
      color:var(--muted)}
.skus li{padding:1px 0}
.skus .mono{color:var(--ink); margin-right:7px}
.film-nums{text-align:right; flex:none}
.film-nums div{font-size:13px; color:var(--muted)}
.film-nums span{font-weight:600; color:var(--ink)}
.film-nums .big{font-family:var(--display); font-size:26px; font-weight:600;
      color:var(--ink); line-height:1.2}
.spark{display:flex; align-items:flex-end; gap:6px; margin-top:14px; height:78px;
      padding-top:4px}
.spark .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
      align-items:center; height:100%}
.spark i{display:block; width:100%; flex:0 0 auto; background:var(--accent);
      border-radius:3px 3px 0 0; opacity:.88}
.spark em{font-style:normal; font-size:10.5px; color:var(--muted); margin-top:5px;
      font-family:var(--display); letter-spacing:.06em}

/* earlier years --------------------------------------------------------- */
/* earlier years — the same weight and rhythm as a statement row --------- */
.years{max-width:460px}
.yr{display:flex; align-items:center; justify-content:space-between;
    background:var(--card); border:1px solid var(--rule); border-radius:11px;
    padding:15px 17px; margin-bottom:9px}
.yr-label{font-family:var(--display); font-size:19px; font-weight:400; letter-spacing:var(--tight)}
.yr-amt{font-family:var(--display); font-size:20px; font-weight:400; letter-spacing:var(--tight)}
.yr.grand{border-color:var(--accent); background:var(--accent-soft)}
.yr.grand .yr-amt{color:var(--accent)}

/* admin roster ---------------------------------------------------------- */
table.roster{width:100%; border-collapse:collapse; background:var(--card);
      border:1px solid var(--rule); border-radius:11px; overflow:hidden; font-size:14.5px}
table.roster th{font-family:var(--body); text-transform:uppercase; font-size:10.5px;
      letter-spacing:.08em; color:var(--muted); text-align:left; padding:10px 14px;
      border-bottom:1px solid var(--rule)}
table.roster td{padding:9px 14px; border-bottom:1px solid var(--rule-soft)}
table.roster tr:last-child td{border-bottom:0}
table.roster a{font-weight:600; text-decoration:none}
/* a name turns orange on hover — but a button is already orange, and its
   label has to stay readable, so buttons are excluded here and below. */
table.roster a:not(.btn):hover{color:var(--accent)}
.btn:hover,.btn:focus{color:#fff}
.btn.ghost:hover,.btn.ghost:focus{color:var(--ink)}
table.roster input[name=email]{min-width:210px; padding:6px 9px; font-size:13.5px}
.audit{margin-top:34px}
.audit h2{font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
      font-size:14px; color:var(--muted)}
.audit ul{list-style:none; padding:0; margin:0; font-size:13px}
.audit li{padding:5px 0; border-bottom:1px solid var(--rule-soft)}

.legal{margin-top:40px; padding-top:18px; border-top:1px solid var(--rule);
      font-size:12.5px; color:var(--muted)}
.hidden{display:none !important}

/* small screens --------------------------------------------------------- */
@media (max-width:720px){
  .bar{padding:10px 12px; gap:8px}
  .brand span{display:none}
  .who{gap:7px; font-size:13px}
  .who .em{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  h1.big{font-size:36px}
  .mo{min-width:0; font-size:19px}
  .stm-head .meta{display:none}
  .search{min-width:100%; margin-left:0}
  table.lines thead{display:none}
  table.lines,table.lines tbody,table.lines tr,table.lines td{display:block; width:100%}
  table.lines tr{padding:10px 0; border-bottom:1px solid var(--rule-soft)}
  table.lines td{border:0; padding:2px 0; text-align:left !important}
  table.lines td.r:before{content:attr(data-l) " "; color:var(--muted); font-size:12px}
  table.lines tfoot{display:block}
  table.lines tfoot td{display:block}
  .film-head{flex-direction:column}
  .film-nums{text-align:left}
}

/* ==========================================================================
   On a phone
   --------------------------------------------------------------------------
   A table with six columns cannot be made to fit a 390px screen; it can only
   be made to scroll sideways, which hides the very column you came for. So on
   a narrow screen every table here stops being a table and becomes a stack of
   cards: one contributor per card, each figure labelled with the heading it
   sat under. The page itself loses its wide margins, the title's buttons go
   full width so they can be hit with a thumb, and anything that was pinned to
   the right unpins and falls into the reading order.
   ========================================================================== */
@media (max-width:720px){
  .wrap{padding-left:14px; padding-right:14px}
  .titlerow{flex-direction:column; align-items:stretch; gap:14px}
  .toolbar{width:100%}
  .toolbar > *,.toolbar .btn,.btn-fold,.btn-fold > summary{flex:1 1 auto; text-align:center}
  .toolbar .btn{padding:12px 16px}

  /* a fold's heading and its figure stack rather than fight for the line */
  .fold > summary{flex-wrap:wrap; padding:14px 14px; font-size:16px}
  .fold > summary em{margin-left:0; flex-basis:100%; padding-left:19px}
  .fold-body{padding:2px 14px 16px}
  .fold .panel-head{flex-direction:column; align-items:stretch; gap:10px}
  .period-pick{margin-left:0; flex-direction:column; align-items:stretch}
  .period-pick select{width:100%}

  /* every roster and catalogue becomes a stack of cards */
  table.roster,table.roster tbody,table.roster tr,table.roster td,
  table.catalog,table.catalog tbody,table.catalog tr,table.catalog td{
      display:block; width:100%}
  table.roster thead,table.catalog thead{display:none}
  table.roster tr,table.catalog tr{padding:14px 0; border-bottom:1px solid var(--rule)}
  table.roster tr:last-child,table.catalog tr:last-child{border-bottom:0}
  table.roster td,table.catalog td{border:0; padding:3px 0; text-align:left !important}
  /* the first cell is the name, so it leads the card */
  table.roster td:first-child{font-size:17px; margin-bottom:4px}
  /* the rest carry the heading they came from */
  table.roster td.r:before,table.catalog td.r:before{
      content:attr(data-l) " "; color:var(--muted); font-size:12px}
  /* the payout list is read down the right-hand edge, so the name and the
     amount share a line and the detail tucks underneath */
  table.payoutlist tbody tr{display:grid; grid-template-columns:1fr auto;
      column-gap:12px; row-gap:2px; padding:12px 0}
  table.payoutlist tbody td:nth-child(1){grid-area:1/1; font-size:16px; margin:0}
  table.payoutlist tbody td:nth-child(4){grid-area:1/2; text-align:right !important;
      font-size:17px}
  table.payoutlist tbody td:nth-child(2){grid-area:2/1; font-size:13px}
  table.payoutlist tbody td:nth-child(3){grid-area:2/2; text-align:right !important;
      font-size:12.5px}
  table.payoutlist tbody td:nth-child(4):before{content:none}
  /* an em dash under every name is noise; a real refund is not */
  table.payoutlist tbody td.norefund{display:none}

  table.roster tfoot{display:block}
  table.roster tfoot tr{display:flex; justify-content:space-between; padding:12px 0}
  table.roster tfoot th{display:block; border:0; padding:0}
  /* the contributor card: name, then address, then the three figures side by
     side, then the two buttons — rather than nine stacked lines */
  table.roster:not(.payoutlist) tbody tr{display:grid;
      grid-template-columns:repeat(3,1fr); column-gap:10px; row-gap:8px}
  table.roster:not(.payoutlist) tbody td:nth-child(1),
  table.roster:not(.payoutlist) tbody td:nth-child(2),
  table.roster:not(.payoutlist) tbody td:nth-child(6){grid-column:1/-1}
  table.roster:not(.payoutlist) tbody td.r:before{display:block; margin-bottom:1px}
  table.roster:not(.payoutlist) tbody td.r{font-size:15px}

  table.roster input[name=email],.emailcell input[name=email]{width:100%; min-width:0}
  .emailcell .editaddr{display:flex; gap:8px; align-items:center; margin-top:6px;
      flex-wrap:nowrap}
  .emailcell .editaddr input[name=email]{flex:1 1 auto; min-width:0}
  .emailcell .editaddr .btn{flex:0 0 auto}
  td.nowrap{white-space:normal; display:flex !important; gap:10px; align-items:center}
  table.roster td .btn.tiny{padding:9px 18px; font-size:13px}

  /* one order per card: the reference and the date share the top line, the
     film has a line of its own, the workings pair up two to a row, and the
     commission — the figure they came for — sits alone at the foot */
  table.lines tbody tr{display:grid; grid-template-columns:1fr 1fr;
      column-gap:12px; row-gap:2px; padding:13px 0}
  table.lines tbody td:nth-child(2){text-align:right !important; grid-column:2}
  table.lines tbody td:nth-child(3){grid-column:1/-1; font-size:15.5px;
      margin:3px 0 5px}
  table.lines tbody td:nth-child(9){grid-column:1/-1; font-size:16px;
      margin-top:5px; padding-top:7px; border-top:1px solid var(--rule-soft)}
  table.lines tbody td:nth-child(9):before{font-size:13px}
  table.lines tfoot td{padding:4px 0}

  /* the statement cards */
  .stm-head{padding:14px}
  .stm-body{padding:0 14px 14px}
  .tabs{gap:0}
  .tab{flex:1 1 auto; padding:11px 8px; text-align:center}
  .search.wide{max-width:none}
  .stats,.stats-3{gap:10px}
  .stat b{font-size:26px}
  h1.big{font-size:30px}
  .yr{padding:11px 0}
  .changelog li{gap:4px}
  .changelog .when{min-width:0; flex-basis:100%}
  .write textarea{min-height:120px}
}

@media (max-width:560px){
  .bar.store{padding:14px 16px; min-height:64px}
  .storenav a{font-size:14px}
  .signin-page{min-height:calc(100vh - 64px)}
}

@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  h1.big{font-size:26px}
  .bar .btn{padding:9px 14px; font-size:13px}
}


/* the store is dark for everyone, so there is one logo and no swap --------- */
img.lg-light,img.lg-dark{display:block}

/* three headline figures instead of four ---------------------------------- */
.stats-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.stats-3{grid-template-columns:1fr}}

/* collapsible admin sections ---------------------------------------------- */
.fold{background:var(--card); border:1px solid var(--rule); border-radius:12px;
      margin-bottom:10px; overflow:hidden}
.fold > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
      gap:12px; padding:15px 18px; font-family:var(--display); font-size:17px;
      font-weight:400; letter-spacing:var(--tight)}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{content:""; width:7px; height:7px; flex:none;
      border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
      transform:rotate(-45deg); transition:transform .16s ease}
.fold[open] > summary::before{transform:rotate(45deg)}
.fold > summary:hover{background:rgba(255,255,255,.03)}
.fold > summary em{margin-left:auto; font-style:normal; font-family:var(--body);
      font-size:12.5px; font-weight:500; color:var(--muted)}
.fold-body{padding:2px 18px 18px; border-top:1px solid var(--rule-soft)}
.fold-body .note:first-of-type{border-top:0}
.auditlist{list-style:none; padding:0; margin:0; font-size:13px}
.auditlist li{padding:5px 0; border-bottom:1px solid var(--rule-soft)}

/* the payout run's month picker ------------------------------------------- */
.panel-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.panel-head h2{margin:0}
.period-pick{margin-left:auto; align-items:center}
.period-pick label{margin:0 4px 0 0}
.period-pick select{width:auto; padding:7px 10px; font-size:13.5px}

h2.sect{font-family:var(--display); font-weight:400; font-size:24px;
      letter-spacing:var(--tight); margin:38px 0 14px}

/* the roster's address column --------------------------------------------- */
.emailcell .addr{display:block; font-size:13.5px}
.emailcell .addr.none{color:var(--muted); font-style:italic}
.emailcell .editaddr{margin-top:5px}
.emailcell input[name=email]{min-width:190px; padding:5px 9px; font-size:12.5px}
.nowrap{white-space:nowrap}

/* the toolbar of buttons beside the page title ---------------------------- */
.toolbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.btn-fold{display:inline-block}
.btn-fold > summary{list-style:none; cursor:pointer}
.btn-fold > summary::-webkit-details-marker{display:none}
.toolbar-panel{display:none; background:var(--card); border:1px solid var(--rule);
      border-radius:12px; padding:16px 18px; margin:0 0 22px}
.admin:has(#addform[open]) .toolbar-panel{display:block}
#addform[open] > summary{background:var(--accent); color:#fff; border-color:transparent}

/* a payout run and a contributor list that fold away ---------------------- */
/* the orange edge marks whichever section is open, whatever it is */
.fold{border-left:3px solid transparent}
.fold[open]{border-left-color:var(--accent)}
.fold > summary span{flex:none}
.fold .panel-head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
      margin:10px 0 4px}
.fold .search.wide{margin:6px 0 14px}

/* what a row says back to you ---------------------------------------------- */
.rowmsg{display:none; font-size:12.5px; margin-top:5px; line-height:1.35}
.rowmsg.on{display:block}
.rowmsg.ok{color:var(--good,#7bbf7b)}
.rowmsg.bad{color:var(--warn)}
.emailcell input.wants{outline:2px solid var(--warn); outline-offset:-1px;
      border-color:transparent}
.emailcell .addr{word-break:break-word}

/* the change log ---------------------------------------------------------- */
.changelog{list-style:none; padding:0; margin:0; font-size:14px}
.changelog li{padding:9px 0; border-bottom:1px solid var(--rule-soft);
      display:flex; gap:14px; flex-wrap:wrap; align-items:baseline}
.changelog li:last-child{border-bottom:0}
.changelog .when{color:var(--muted); font-size:12.5px; flex:none; min-width:118px}
.changelog .what{flex:1; min-width:240px}
.changelog li.isupdate .what{font-weight:700}
.changelog .subnotes{list-style:disc; margin:6px 0 0 18px; padding:0; flex-basis:100%;
      color:var(--muted); font-size:13px}
.changelog .subnotes li{display:list-item; border:0; padding:2px 0}

/* the mail page ----------------------------------------------------------- */
.preview{background:rgba(255,255,255,.04); border:1px solid var(--rule-soft);
      border-radius:9px; padding:14px 16px; margin:0; white-space:pre-wrap;
      font:500 14px/1.55 var(--body); color:var(--ink); overflow-x:auto}
.modes{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.pick{display:flex; gap:10px; align-items:flex-start; text-transform:none;
      letter-spacing:0; font-size:14px; font-weight:500; color:var(--muted);
      background:rgba(255,255,255,.03); border:1px solid var(--rule);
      border-radius:9px; padding:11px 13px; cursor:pointer; margin:0}
.pick input{width:auto; flex:none; margin-top:3px; accent-color:var(--accent)}
.pick b{color:var(--ink); font-weight:600}
.pick:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
table.roster tr.skipped td{opacity:.55}

/* things the portal cannot decide on its own ------------------------------ */
.fold.needs[open]{border-left-color:var(--warn)}
.finding{padding:14px 0; border-bottom:1px solid var(--rule-soft)}
.finding:last-child{border-bottom:0}
.fhead{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.fhead b{font-size:16px}
.fhead .amt{margin-left:auto; font-weight:600}
.fwhat{margin:6px 0 2px}
.fneed{margin:2px 0 0; color:var(--warn)}
.fnote{margin:6px 0 0; font-size:13.5px; background:rgba(255,255,255,.04);
      border-radius:8px; padding:8px 10px; word-break:break-word}
.factions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.factions input[type=text]{min-width:210px; padding:6px 9px; font-size:13px}
.copyq.done{background:var(--good); border-color:transparent}

/* and the answers to them, kept so they can become rules ------------------- */
.fold.decided[open]{border-left-color:var(--good)}
.finding.done .fneed{color:var(--muted)}
.fwhy{margin:2px 0 0}
@media (max-width:720px){
  .fhead .amt{margin-left:0; flex-basis:100%}
  .factions form,.factions input[type=text]{width:100%}
  .fold.decided .panel-head .btn{width:100%}
}

/* ======================================================================== */
/* the method, and the working behind a figure                              */
/* ======================================================================== */

.card{background:var(--card); border:1px solid var(--rule); border-radius:12px;
      padding:18px 20px; margin-bottom:12px}
.method .foot,.working .foot{margin-top:22px}

/* a worked example, and the same shape wherever a figure is explained ----- */
.eg{border-color:var(--accent); background:linear-gradient(0deg,var(--card),var(--card))}
.eg-head,.oh-top,.wl-head,.po-head,.step-head{display:flex; align-items:baseline;
      gap:12px; flex-wrap:wrap}
.eg-head{margin-bottom:12px}
.eg-head b,.wl-head b{font-size:16px}

ol.trace{list-style:none; margin:0; padding:0; counter-reset:trace}
ol.trace li{counter-increment:trace; display:grid; gap:4px 14px; padding:9px 0;
      border-bottom:1px solid var(--rule-soft); align-items:baseline;
      grid-template-columns:1.1fr 1.7fr auto auto}
ol.trace li:last-child{border-bottom:0}
ol.trace li:last-child .t-run{font-family:var(--display); font-size:17px}
.t-what{font-weight:600}
.t-what::before{content:counter(trace) "."; color:var(--muted); font-weight:400;
      margin-right:7px; font-family:var(--mono); font-size:.85em}
.t-detail{color:var(--muted); font-size:13.5px}
.t-delta{font-family:var(--mono); font-size:13px; text-align:right; color:var(--muted)}
.t-delta.down{color:var(--warn)}
.t-run{font-family:var(--mono); font-size:14px; text-align:right; min-width:92px;
      font-weight:600}

/* the steps themselves ---------------------------------------------------- */
.step-head{margin-bottom:8px}
.step-head h2{margin:0; font-size:19px; font-weight:400; letter-spacing:var(--tight)}
.step-n{font-family:var(--mono); font-size:12px; color:var(--accent);
      background:var(--accent-soft); border-radius:50%; width:25px; height:25px;
      display:inline-flex; align-items:center; justify-content:center; flex:none}
.step-text{margin:0 0 6px; max-width:66ch}
.step-why{margin:0; color:var(--muted); font-size:14px; max-width:66ch}

table.params{width:100%; border-collapse:collapse; margin-top:14px; font-size:14px}
table.params th{text-align:left; font-weight:600; padding:9px 12px 9px 0;
      border-top:1px solid var(--rule-soft); white-space:nowrap; vertical-align:top}
table.params td{padding:9px 12px 9px 0; border-top:1px solid var(--rule-soft);
      vertical-align:top}
table.params .val{font-family:var(--mono); white-space:nowrap}
table.params .note{color:var(--muted); font-size:13px; width:100%}
table.params .act{text-align:right}
table.params tr.edited .val{color:var(--warn)}

/* looking an order up ----------------------------------------------------- */
.lookup{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.lookup label{margin:0 0 9px}
.lookup input{width:190px; font-family:var(--mono)}
.oh-top h2{margin:0; font-size:21px; font-weight:400; letter-spacing:var(--tight)}
.oh-paid{margin-left:auto; font-family:var(--display); font-size:19px}
.wl-list{margin-left:auto; font-family:var(--mono); color:var(--muted)}
.wline .wl-head{padding-bottom:12px; border-bottom:1px solid var(--rule)}
.payout{padding:14px 0 2px; border-bottom:1px solid var(--rule-soft)}
.payout:last-child{border-bottom:0}
.po-amt{margin-left:auto; font-family:var(--display); font-size:17px}
.pill.warnpill{background:var(--warn-soft); color:var(--warn)}

@media (max-width:760px){
  ol.trace li{grid-template-columns:1fr auto}
  .t-detail{grid-column:1 / -1; order:3}
  .t-delta{order:2}
  .t-run{order:4; grid-column:2}
  table.params,table.params tbody,table.params tr,table.params th,table.params td{
      display:block; width:auto}
  table.params th{border-top:1px solid var(--rule); padding-bottom:0}
  table.params td{border-top:0; padding-top:4px}
  .lookup input{width:100%}
}

/* changing a rule --------------------------------------------------------- */
.editing{border-color:var(--warn)}
.ruleform{margin-top:14px}
.rf-row{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap}
.rf-row.save{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule)}
.rf-row .grow{flex:1; min-width:240px}
.rf-row label{display:block; margin:0 0 7px; font-family:var(--body);
      text-transform:uppercase; letter-spacing:.08em; font-size:11px;
      font-weight:700; color:var(--muted)}
.rf-now{padding:11px 0; font-size:15px; color:var(--muted)}
.rf-row input,.rf-row select{width:100%}
.rf-row > div{min-width:170px}
.impact{margin-top:20px; padding-top:16px; border-top:1px solid var(--rule)}
.imp-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px}
.imp-by{margin-left:auto; font-family:var(--display); font-size:19px}
.imp-by.down{color:var(--warn)} .imp-by.up{color:var(--good)}
table.imptable{width:100%; border-collapse:collapse; font-size:14px; margin:8px 0 14px}
table.imptable th{font-family:var(--body); text-transform:uppercase; font-size:10.5px;
      letter-spacing:.08em; color:var(--muted); font-weight:600; text-align:left;
      padding:6px 8px; border-bottom:1px solid var(--rule)}
table.imptable td{padding:7px 8px; border-bottom:1px solid var(--rule-soft)}
table.imptable .r{text-align:right}
table.imptable .down{color:var(--warn)} table.imptable .up{color:var(--good)}
@media (max-width:720px){
  .rf-row{flex-direction:column; align-items:stretch}
  .rf-row > div{min-width:0}
}
table.imptable.wide td,table.imptable.wide th{padding:9px 10px}
table.imptable tr.picked{background:var(--accent-soft)}
.panel-title{margin:0 0 12px; font-size:18px; font-weight:400; letter-spacing:var(--tight)}
.nowrap{white-space:nowrap}
.closerow{margin:0 0 14px; gap:10px}
.closerow input[type=text]{min-width:230px; padding:7px 10px; font-size:13.5px}
.closerow .dim{font-size:13px}
@media (max-width:720px){ .closerow,.closerow input[type=text],.closerow button{width:100%} }
.backline{margin:-6px 0 18px; font-size:13.5px}
.ratewas{display:block; color:var(--warn); font-size:12.5px; margin-top:3px}
table.catalog td.changed{color:var(--warn); font-weight:600}
.ratef{gap:5px}
.ratef input[type=number]{width:62px; padding:5px 7px; font-size:13px}
.ratef input[type=text]{width:150px; padding:5px 7px; font-size:13px}
@media (max-width:720px){ .ratef{width:100%} .ratef input[type=text]{flex:1} }

/* the tools menu, and a toolbar that reads as one thing ------------------- */
.toolbar{gap:8px}
.btn-fold.menu{position:relative}
.btn-fold.menu > summary::after{content:""; display:inline-block; width:5px; height:5px;
      margin-left:8px; vertical-align:middle; border-right:1.5px solid currentColor;
      border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)}
.btn-fold.menu[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.menu-body{position:absolute; right:0; top:calc(100% + 8px); z-index:40;
      width:min(360px, calc(100vw - 32px)); background:var(--card);
      border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);
      padding:7px; text-align:left}
.menu-body a{display:block; padding:10px 12px; border-radius:8px;
      text-decoration:none; color:var(--ink)}
.menu-body a:hover{background:rgba(255,255,255,.05)}
.menu-body a + a{margin-top:1px}
.menu-body b{display:block; font-size:14.5px; font-weight:600}
.menu-body span{display:block; color:var(--muted); font-size:12.5px; margin-top:2px;
      line-height:1.4}
@media (max-width:720px){
  .btn-fold.menu{position:static}
  .menu-body{position:static; width:auto; margin-top:8px}
}
.ratechange{margin:0 0 12px; padding:10px 12px; font-size:13px; line-height:1.5;
      background:var(--warn-soft); border-radius:8px; color:var(--ink)}
.ratechange b{font-family:var(--mono); font-size:.9em}
table.catalog td:last-child{white-space:normal; min-width:230px}
table.roster .who{font-weight:600}
table.roster .pills{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
table.roster th .thsub{font-weight:400; opacity:.65; text-transform:none; letter-spacing:0}
details.btn-fold.menu:not([open]) .menu-body{display:none}

/* ---- unpaid orders -------------------------------------------------------- */
.unpaid .addunpaid{margin-bottom:22px}
.unpaid .addunpaid form{margin-top:12px}
.unpaid-order .pushform{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule-soft)}
.unpaid-order .pushform select{width:auto}
.unpaid-order .pushform label input[type=checkbox],
.unpaid .addunpaid label input[type=checkbox],
.unpaid-order .ufold label input[type=checkbox]{width:auto; margin:0 6px 0 0; vertical-align:-2px}
.pushrow{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:8px 0;
         border-top:1px solid var(--rule-soft)}
.pushrow .po-amt{margin-left:auto}
.ufold{margin-top:12px}
.ufold > summary{cursor:pointer; color:var(--muted); font-size:13px}
.ufold > summary:hover{color:var(--ink)}
.preview{border-color:var(--accent)}
.preview .factions input[type=text]{flex:1}
.btn.unpaid-btn b{font-weight:400; opacity:.75; margin-left:4px}

/* current-month tile: the month it covers, under the figure */
.stat .est-note{display:block; font-style:normal; font-size:12px; color:var(--muted);
      margin-top:3px}

/* the PDF link sits beside the month's toggle, so it works with the month shut;
   the whole row lights on hover, not just the toggle */
.stm-top:hover{background:var(--rule-soft)}
.stm-top .stm-head:hover{background:none}
@media (max-width:720px){
  .stm-pdf{width:42px; margin-right:10px}
  .stm-pdf.none{width:0; margin-right:0}
  .stm-head{gap:8px}
  .stm-head .amt{min-width:0}
}

/* 2026-10-15: latest statement beside the month in progress */
.stats-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.stats-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.stats-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.stats-5{grid-template-columns:1fr}}
.stat.latest{border-color:var(--ink, #222)}
.paycycle{color:var(--muted); font-size:14px; margin:-14px 0 24px; max-width:60em}
.myemail{margin-top:32px}
.myemail form{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.myemail input[type=email]{flex:1 1 240px; min-width:0}
.mutedp.small{font-size:13px}

/* statement PDFs ---------------------------------------------------------- */
.pdfmonths{max-width:380px; margin:6px 0 16px}
.pdfupload{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:8px 0 16px}
.pdfupload label{flex-basis:100%; font-size:13px}
.pdfupload input[type=file]{max-width:100%}
.pdfresult{flex-basis:100%; margin:4px 0 0; padding-left:18px; color:var(--warn); font-size:13px}
.keybox{border-top:1px solid var(--rule-soft); padding-top:12px}
.keybox code.newkey{user-select:all; word-break:break-all; font-size:14px}