/* ==========================================================================
   list.css: the running list on /list/ only. Everything is built from
   site.css's own tokens (--paper, --primary, --rule, ...), so it follows the
   site's light/dark theme without a second palette. Kept out of site.css on
   purpose: that file is versioned across every page (NOTES.md section 6) and
   nothing here is used anywhere else.
   Identical copy on both sites. Diff them after editing.
   ========================================================================== */
.rl{padding-block:var(--space-4) calc(var(--space-7) + 5rem);}
.rl-head h1{font-size:var(--step-4);}
.rl-head .lead{margin-top:var(--space-2);font-size:var(--step-0);}
.rl-head--compact .lead,.rl-head--compact .eyebrow{display:none;}
.rl-head--compact h1{font-size:var(--step-3);}

/* ---- list tabs ---- */
.rl-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .6rem;margin-top:var(--space-3);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.rl-tab{flex:none;font-family:var(--font-text);font-size:var(--step--1);line-height:1;padding:.75rem 1rem;
  border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.rl-tab:hover{border-color:var(--ink);}
.rl-tab[aria-selected="true"]{background:var(--primary);color:var(--ink-inverse);border-color:var(--primary);}
.rl-tab__n{font-size:var(--step--2);font-weight:600;min-width:1.4em;padding:.2em .45em;border-radius:999px;
  background:var(--paper-3);color:var(--ink);text-align:center;}
.rl-tab[aria-selected="true"] .rl-tab__n{background:var(--ink-inverse);color:var(--primary);}
.rl-tab__n[data-n="0"]{display:none;}
.rl-tab--new{border-style:dashed;color:var(--muted);}

/* ---- the add box: the one thing this page is for ---- */
.rl-add{display:flex;gap:.5rem;margin-top:var(--space-2);position:sticky;top:0;z-index:5;
  background:var(--paper);padding:.6rem 0;}
.rl-add input{flex:1;min-width:0;font-size:1.0625rem;padding:1rem 1.1rem;border-width:1.5px;}
.rl-add input:focus{border-color:var(--primary);}
.rl-add .btn{flex:none;padding-inline:1.3rem;}
.rl-store{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:var(--step--2);color:var(--muted);
  letter-spacing:.04em;margin-top:.2rem;}
.rl-store select{width:auto;font-size:var(--step--2);padding:.3rem 1.6rem .3rem .5rem;border-color:var(--rule-strong);background-color:transparent;color:var(--ink);}
.rl-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--muted);text-decoration:underline;cursor:pointer;}
.rl-linkbtn:hover{color:var(--ink);}

/* ---- usuals ---- */
.rl-usuals{margin-top:var(--space-3);}
.rl-usuals__label{display:block;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem;}
.rl-usuals .chip{padding:.55rem .85rem;}
.rl-usuals .chip::before{content:"+\00a0";color:var(--accent-text);font-weight:600;}

/* ---- items ---- */
.rl-items{list-style:none;margin:var(--space-3) 0 0;padding:0;border-top:1px solid var(--rule);}
.rl-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.25rem .75rem;
  padding:.35rem 0;border-bottom:1px solid var(--rule);}
/* input.rl-item__text, not .rl-item__text: site.css styles input[type=text] and would otherwise win. */
input.rl-item__text{min-width:0;width:100%;border:1px solid transparent;background:transparent;padding:.6rem .4rem;
  font-size:var(--step-0);border-radius:2px;color:var(--ink);font-family:var(--font-text);}
input.rl-item__text:hover{border-color:var(--rule);}
input.rl-item__text:focus{border-color:var(--border-field);background:var(--paper);}
.rl-item__tag{font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap;}
.rl-item__rm{background:none;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;
  width:2.75rem;height:2.75rem;border-radius:2px;}
.rl-item__rm:hover{color:var(--danger);}
.rl-item--new{animation:rl-in .5s var(--ease);}
@keyframes rl-in{from{background:var(--primary-tint);transform:translateY(-4px);opacity:.2;}to{background:transparent;transform:none;opacity:1;}}
.rl-empty{margin-top:var(--space-3);padding:var(--space-4) var(--space-3);border:1px dashed var(--rule-strong);border-radius:2px;
  color:var(--muted);text-align:center;}
.rl-empty strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:var(--step-2);font-weight:400;margin-bottom:.4rem;}

/* ---- status, sign-in, install ---- */
.rl-status{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-3);font-size:var(--step--2);
  letter-spacing:.06em;color:var(--muted);}
.rl-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--muted);flex:none;}
.rl-dot--ok{background:var(--success);}
.rl-dot--busy{background:var(--accent);animation:rl-pulse 1s infinite alternate;}
.rl-dot--off{background:var(--danger);}
@keyframes rl-pulse{from{opacity:.35;}to{opacity:1;}}
.rl-card{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);}
.rl-card h2{font-size:var(--step-2);font-family:var(--font-display);}
.rl-card p{margin:.5rem 0 0;font-size:var(--step--1);}
.rl-card form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-2);}
.rl-card form input[type=email]{flex:1;min-width:12rem;}
.rl-card .btn{padding:.85rem 1.2rem;}
.rl-card__close{float:right;background:none;border:0;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .4rem;}
.rl-steps{margin:.6rem 0 0;padding-left:1.2rem;font-size:var(--step--1);}
.rl-steps li{margin:.25rem 0;}

/* ---- the send bar: always in reach of a thumb ---- */
.rl-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--panel);color:var(--panel-ink);
  border-top:1px solid var(--panel-rule);padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom));}
.rl-bar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}
.rl-bar__count{font-size:var(--step--1);line-height:1.3;}
.rl-bar__count strong{display:block;font-family:var(--font-display);font-size:var(--step-2);font-weight:400;}
.rl-bar .btn{flex:none;}
.rl-bar .btn[disabled]{opacity:.45;cursor:default;}

/* ---- send sheet (a <dialog>) ---- */
.rl-dialog{border:1px solid var(--rule-strong);border-radius:4px;padding:0;background:var(--paper);color:var(--ink);
  width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);}
.rl-dialog::backdrop{background:rgba(10,14,12,.6);}
.rl-dialog__in{padding:var(--space-3);}
.rl-dialog h2{font-family:var(--font-display);font-size:var(--step-3);}
.rl-dialog .rl-pick{list-style:none;margin:var(--space-2) 0;padding:0;}
.rl-pick li{border-bottom:1px solid var(--rule);}
.rl-pick label{display:flex;align-items:center;gap:.75rem;padding:.8rem 0;cursor:pointer;}
.rl-pick input{width:1.25rem;height:1.25rem;accent-color:var(--primary);flex:none;}
.rl-pick span.n{margin-left:auto;color:var(--muted);font-size:var(--step--1);white-space:nowrap;}
.rl-dialog textarea{min-height:4.5rem;}
.rl-dialog .btn-row{margin-top:var(--space-3);}
.rl-dialog .rl-err{color:var(--danger);font-size:var(--step--1);margin-top:var(--space-2);}
.rl-preview{margin:var(--space-2) 0 0;font-size:var(--step--1);color:var(--muted);}

/* ---- sent: the payoff ---- */
.rl-sent{scroll-margin-top:7rem;margin-top:var(--space-3);padding:var(--space-4) var(--space-3);border:1px solid var(--rule);border-radius:2px;
  background:var(--primary-tint);text-align:center;}
.rl-sent h2{font-family:var(--font-display);font-size:var(--step-3);}
.rl-sent p{margin:.6rem auto 0;max-width:44ch;}
.rl-sent .btn-row{justify-content:center;margin-top:var(--space-3);}

/* ---- toast (undo) ---- */
.rl-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.75rem + env(safe-area-inset-bottom));z-index:30;
  background:var(--ink);color:var(--paper);padding:.7rem 1rem;border-radius:2px;font-size:var(--step--1);
  display:flex;gap:1rem;align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:calc(100vw - 2rem);}
.rl-toast button{background:none;border:0;color:var(--accent-tint);font:inherit;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--step--2);cursor:pointer;text-decoration:underline;}
:root[data-theme="dark"] .rl-toast button{color:var(--primary-tint);} /* the toast is light-on-dark inverted in dark theme */

/* Opened from the home screen: it is an app now, so the site chrome steps back. */
@media (display-mode:standalone){
  .site-header .nav,.site-header .nav-toggle,.site-header .header-cta,.site-footer,.rl-install{display:none !important;}
  .brand-logo{height:40px;}
}
@media (max-width:520px){
  .rl-item__tag{grid-column:1 / 2;grid-row:2;padding:0 .4rem .4rem;}
  .rl-item{grid-template-columns:1fr auto;}
  .rl-item__rm{grid-row:1 / span 2;grid-column:2;}
  .rl-bar .btn{padding:1rem 1.1rem;}
}
@media (prefers-reduced-motion:reduce){.rl-item--new,.rl-dot--busy{animation:none;}}
@media print{.rl-bar,.rl-add,.rl-tabs,.rl-card,.rl-status,.rl-usuals,.rl-item__rm{display:none !important;}}