/* Marlo Wren desk. Brand tokens copied from the site's style.css (light and
   dark). Plain and warm, phone first; not the Odyssey dark-gold system. */
:root{
  --paper:#faf9f6; --paper-2:#f2f0ea; --plate:#ffffff; --edge:#e2ded5;
  --ink:#1a1c1a; --ink-2:#5f6560; --ink-3:#6a706b; --rule:#ddd9d2;
  --accent:#4c6353; --accent-soft:#e6ece7;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Mrs Saint Delafield",cursive;
  --measure:66ch;
  --stage:radial-gradient(closest-side at 50% 46%,rgba(196,163,110,.14),transparent 82%),
    radial-gradient(closest-side at 50% 52%,#efe6d4 0%,var(--paper) 100%);
  --card-shadow:0 2px 6px rgba(26,28,26,.13),0 18px 40px rgba(26,28,26,.18);
  --card-shadow-front:0 6px 16px rgba(26,28,26,.19),0 46px 96px rgba(26,28,26,.32);
  --card-shadow-grid:0 2px 6px rgba(26,28,26,.10),0 10px 22px rgba(26,28,26,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#151716; --paper-2:#1c1f1d; --plate:#fbfbf9; --edge:#2c302d;
    --ink:#e9ece9; --ink-2:#a6ada7; --ink-3:#7d857f; --rule:#2c302d;
    --accent:#8fb39c; --accent-soft:#1e2723;
    --stage:transparent;
    --card-shadow:0 1px 3px rgba(26,28,26,.10),0 14px 34px rgba(26,28,26,.16);
    --card-shadow-front:0 4px 12px rgba(26,28,26,.16),0 46px 96px rgba(26,28,26,.32);
    --card-shadow-grid:0 1px 3px rgba(26,28,26,.08);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
h1,h2{margin:0 0 .5em; font-family:var(--display); font-weight:400; line-height:1.15}
h1{font-size:1.6rem}
h2{font-size:1.2rem}
p{margin:0 0 .75em}
a{color:var(--accent)}

.main{
  max-width:640px; margin:0 auto;
  padding-top:max(16px, env(safe-area-inset-top));
  padding-left:16px; padding-right:16px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

.card{
  /* --paper-2, not --plate: --plate stays near-white in dark mode (it is
     the site's frame for artwork, which must never invert), but --ink text
     needs a surface that inverts with it, which --paper-2 is. */
  background:var(--paper-2); border:1px solid var(--edge); border-radius:12px;
  padding:20px 16px; margin-bottom:16px;
}
.card-narrow{max-width:420px; margin-left:auto; margin-right:auto}

.script-mark{
  font-family:var(--script); font-size:1.6rem; color:var(--accent);
  margin:0 0 .25em;
}

.notice{color:var(--accent)}
.error{color:#a5432c}

form{display:flex; flex-direction:column; gap:14px; margin:0}
label{display:flex; flex-direction:column; gap:6px; font-size:.95rem; color:var(--ink-2)}
input, select, textarea{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--edge); border-radius:8px; padding:10px 12px;
  min-height:44px;
}
/* Native <select> chrome (most visible in WebKit) uses its own intrinsic
   height and ignores the min-height above unless appearance is turned
   off; this is what actually makes the box ours to size. */
select{-webkit-appearance:none; appearance:none}
textarea{min-height:88px; resize:vertical}

/* button, .button-primary and .button-secondary together, not just
   button{}: the Forget confirm's "Keep" is a plain <a>, and its own
   summary toggle is a <summary>, both styled with these same classes, and
   both need the same 44px tap target as a real <button>. */
button, .button-primary, .button-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; min-height:44px; padding:10px 16px; border-radius:8px;
  border:1px solid var(--edge); cursor:pointer; text-decoration:none;
}
button:disabled{opacity:.5; cursor:default}
.button-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.button-secondary{background:var(--paper-2); color:var(--ink)}

.filters{display:flex; gap:8px; margin-bottom:12px}
.filter{
  padding:8px 12px; border-radius:999px; border:1px solid var(--edge);
  text-decoration:none; color:var(--ink-2); min-height:44px; display:flex; align-items:center;
}
.filter-active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}

ul{list-style:none; margin:0; padding:0}
.inbox-list, .waiting-list, .log-list{display:flex; flex-direction:column; gap:10px}
/* A long email is one unbroken word: without this it can push the layout
   sideways instead of wrapping, in the inbox list, the waiting list, and
   the opened inbox item, which shows the same email in a plain <p>. */
.card p, .inbox-email, .waiting-email{overflow-wrap:anywhere}
.inbox-row a{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
  text-decoration:none; color:var(--ink); border:1px solid var(--edge);
  border-radius:8px; padding:12px; min-height:44px;
}
.inbox-kind{font-weight:600}
.waiting-row{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  border:1px solid var(--edge); border-radius:8px; padding:12px;
}
.log-entry{border:1px solid var(--edge); border-radius:8px; padding:12px}
.log-kind{font-weight:600; margin-bottom:2px}
.log-by{color:var(--ink-3); font-size:.9rem; margin-bottom:0}

/* Forget confirm: a <details> disclosure, no JavaScript needed. */
.forget{margin-top:10px; width:100%}
.forget summary{list-style:none}
.forget summary::-webkit-details-marker{display:none}
.forget-panel{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.forget-panel form{display:block}

/* Tab bar: fixed to the bottom on phones, a plain top row from tablet width up. */
.tabs{
  display:flex; justify-content:space-around;
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:var(--paper-2); border-top:1px solid var(--edge);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:56px; padding:6px; text-decoration:none; color:var(--ink-2);
  font-size:.8rem; text-align:center; white-space:nowrap;
}
.tab[aria-current="page"]{color:var(--accent); font-weight:600}

@media (min-width:720px){
  body{padding-bottom:0}
  .tabs{
    position:static; justify-content:flex-start; gap:4px;
    border-top:none; border-bottom:1px solid var(--edge); padding:8px 16px;
  }
  .tab{flex:none; min-height:44px; padding:8px 14px}
  .main{padding-top:24px}
}