/* One Thing — app design system. Ported from _brief/one-thing-v3.html (canonical). */

:root{
  --paper:#f3efe6;
  --ink:#1a1815;
  --ink-soft:#4a463e;
  --ink-faint:#9a948a;
  --accent:#c8431a;
  --line:rgba(26,24,21,.12);
  --done:#3d5a3d;
  --gold:#a8853f;
}
body.theme-linen{ --paper:#ebe6da; --ink:#2a261f; }
body.theme-midnight{
  --paper:#1a1a1f; --ink:#e8e4d8; --ink-soft:#a8a39a; --ink-faint:#5a554d;
  --accent:#e8a04a; --line:rgba(232,228,216,.14); --done:#7da37d;
}
body.theme-sepia{ --paper:#e8d9bf; --ink:#3a2a1a; --accent:#8a3a1a; }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  transition:background-color .4s, color .4s;
}
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.02) 0, transparent 50%);
  pointer-events:none;z-index:0;
}
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events:none;opacity:.6;mix-blend-mode:multiply;z-index:1;
}
body.theme-midnight::after{mix-blend-mode:screen;opacity:.4;}

:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

header{
  position:relative;z-index:2;padding:20px 28px 0;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
}
header .brand{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  letter-spacing:0;text-transform:none;font-size:15px;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;
}
header .brand:hover,header .brand:focus-visible{background:none;color:var(--ink);}
header .brand .plus{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--gold);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--gold);padding:2px 5px;border-radius:2px;
  display:none;
}
body.is-plus header .brand .plus{display:inline-block;}
header .right{display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums;}
header .sync{
  display:none;align-items:center;gap:6px;color:var(--ink-faint);
  font-size:10px;letter-spacing:.18em;
}
body.is-plus header .sync{display:inline-flex;}
header .sync .ring{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);}
header .sync.synced .ring{background:var(--done);}
header .sync.syncing .ring{background:var(--accent);animation:pulse 1s ease-in-out infinite;}

main{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 28px;
}
.label{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.label::after{content:'';flex:1;height:1px;background:var(--line);}
#thing{
  width:100%;background:transparent;border:none;outline:none;
  color:var(--ink);font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(32px,8vw,52px);line-height:1.15;letter-spacing:-.02em;
  resize:none;overflow:hidden;padding:0;min-height:1.15em;
}
#thing::placeholder{color:var(--ink-faint);font-style:italic;font-weight:300;}
.rule{
  height:1px;background:var(--ink);margin-top:14px;
  transform-origin:left;animation:draw 1.2s cubic-bezier(.7,0,.2,1) .2s both;
}
@keyframes draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.done-view{display:none;}
.done-view.active{display:block;}
.composer.active{display:block;}
.composer.hidden{display:none;}

.thing-display{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(32px,8vw,52px);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);transition:opacity .4s, text-decoration-color .8s;
}
.thing-display.completed{
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:var(--done);color:var(--ink-soft);
}

.reflection{
  margin-top:24px;font-family:'Fraunces',serif;font-style:italic;
  font-size:15px;line-height:1.5;color:var(--ink-soft);
  padding:14px 16px;border-left:2px solid var(--gold);
  display:none;
}
.reflection.show{display:block;}
.reflection .tag{
  font-family:'JetBrains Mono',monospace;font-style:normal;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:6px;
}

footer{
  position:relative;z-index:2;padding:18px 28px 24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
}
.meta{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  line-height:1.7;
}
.meta b{color:var(--ink);font-weight:400;}
.actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.actions-row{display:flex;gap:8px;}

button{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);padding:14px 22px;
  cursor:pointer;transition:all .25s;border-radius:0;
}
button:hover,button:focus-visible{background:var(--ink);color:var(--paper);}
button.primary{background:var(--ink);color:var(--paper);}
button.primary:hover,button.primary:focus-visible{
  background:var(--accent);border-color:var(--accent);
}
button.subtle{border-color:transparent;color:var(--ink-soft);padding:10px 0;}
button.subtle:hover,button.subtle:focus-visible{background:transparent;color:var(--accent);}
button.icon{
  width:38px;height:38px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-color:var(--line);color:var(--ink-soft);
}
button.icon svg{width:16px;height:16px;}
button.icon:hover,button.icon:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.sheet-bg{
  position:fixed;inset:0;background:rgba(26,24,21,.45);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:10;
}
.sheet-bg.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--paper);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
  z-index:11;max-height:90vh;max-height:90dvh;
  display:flex;flex-direction:column;
  box-shadow:0 -20px 60px rgba(0,0,0,.2);
}
.sheet.open{transform:translateY(0);}
.sheet-head{
  padding:18px 28px 12px;
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);
}
.sheet-head h2{
  font-family:'Fraunces',serif;font-weight:400;font-style:italic;
  font-size:22px;letter-spacing:-.01em;color:var(--ink);
}
.sheet-head .close{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  background:none;border:none;padding:0;cursor:pointer;color:var(--ink-soft);
}
.sheet-head .close:hover,.sheet-head .close:focus-visible{background:none;color:var(--accent);}
.sheet-body{overflow-y:auto;padding:8px 28px 32px;-webkit-overflow-scrolling:touch;}
.stat-row{
  display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);
}
.stat{flex:1;}
.stat .n{
  font-family:'Fraunces',serif;font-size:36px;font-weight:300;
  letter-spacing:-.02em;line-height:1;color:var(--ink);
}
.stat .l{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px;
}
.entry{
  padding:16px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:baseline;
}
.entry .d{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.entry .t{
  font-family:'Fraunces',serif;font-size:17px;font-weight:400;line-height:1.35;color:var(--ink);
}
.entry.done .t{
  text-decoration:line-through;text-decoration-color:var(--done);
  text-decoration-thickness:1px;color:var(--ink-soft);
}
.entry .b{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;
}
.entry.done .b{color:var(--done);}
.entry:not(.done) .b{color:var(--accent);}
.empty{
  text-align:center;padding:40px 0;
  font-family:'Fraunces',serif;font-style:italic;color:var(--ink-faint);font-size:15px;
}

/* The "more in archive" card — soft, not demanding */
.archive-soft{
  margin-top:22px;padding:24px 20px;
  background:rgba(168,133,63,.06);
  border:1px solid rgba(168,133,63,.18);
  text-align:center;
}
.archive-soft .ttl{
  font-family:'Fraunces',serif;font-style:italic;font-size:18px;
  color:var(--ink);margin-bottom:6px;
}
.archive-soft .sub{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:16px;
}
.archive-soft button{
  background:transparent;color:var(--gold);border:1px solid var(--gold);
  padding:10px 18px;
}
.archive-soft button:hover,.archive-soft button:focus-visible{background:var(--gold);color:var(--paper);}

/* search */
.search-wrap{
  position:relative;margin:14px 0 4px;
}
.search-wrap input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:10px 0 10px 22px;color:var(--ink);
  font-family:'Fraunces',serif;font-size:16px;outline:none;
}
.search-wrap input::placeholder{color:var(--ink-faint);font-style:italic;}
.search-wrap input:focus{border-bottom-color:var(--ink);}
.search-wrap .ic{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);width:14px;height:14px;
}

/* Settings rows */
.row{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);gap:16px;
}
.row .k{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);}
.row .sub{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;
}
.row .sub.on{color:var(--done);margin-top:0;}
.row .v{display:flex;gap:6px;align-items:center;}
.row.last{border-bottom:none;}
.row.plus-row{padding-top:24px;}

/* Section headings inside settings */
.section-h{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.25em;text-transform:uppercase;color:var(--ink-faint);
  padding:22px 0 4px;
}

button.swatch{
  width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;
  border:2px solid transparent;transition:border-color .2s;
}
.swatch.on{border-color:var(--ink);}
.swatch.s-paper{background:#f3efe6;}
.swatch.s-linen{background:#ebe6da;}
.swatch.s-midnight{background:#1a1a1f;}
.swatch.s-sepia{background:#e8d9bf;}
.swatch.s-midnight.on{border-color:var(--gold);}
.swatch.locked{opacity:.45;}
button.swatch:hover,button.swatch:focus-visible{border-color:var(--ink-soft);}
.swatch.s-paper:hover,.swatch.s-paper:focus-visible{background:#f3efe6;}
.swatch.s-linen:hover,.swatch.s-linen:focus-visible{background:#ebe6da;}
.swatch.s-midnight:hover,.swatch.s-midnight:focus-visible{background:#1a1a1f;}
.swatch.s-sepia:hover,.swatch.s-sepia:focus-visible{background:#e8d9bf;}

button.toggle{
  width:42px;height:24px;background:var(--line);border-radius:12px;
  position:relative;cursor:pointer;transition:background .2s;
  border:none;padding:0;
}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;background:var(--paper);border-radius:50%;
  transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.toggle.on{background:var(--accent);}
.toggle.on::after{transform:translateX(18px);}
button.toggle:hover,button.toggle:focus-visible{background:var(--line);}
button.toggle.on:hover,button.toggle.on:focus-visible{background:var(--accent);}

.lock-pill{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--gold);letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--gold);padding:3px 7px;border-radius:2px;
}
.lock-pill.spaced{margin-left:8px;}

/* Plus modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(26,24,21,.55);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.open{opacity:1;pointer-events:auto;}
.modal{
  background:var(--paper);max-width:380px;width:100%;
  padding:36px 28px 28px;position:relative;
  transform:scale(.96);transition:transform .3s;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  max-height:90vh;max-height:90dvh;overflow-y:auto;
}
.modal-bg.open .modal{transform:scale(1);}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:none;border:none;padding:8px;cursor:pointer;
  color:var(--ink-faint);font-size:18px;
}
.modal-close:hover,.modal-close:focus-visible{background:none;color:var(--accent);}
.modal .eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;
}
.modal h3{
  font-family:'Fraunces',serif;font-weight:400;font-style:italic;
  font-size:28px;letter-spacing:-.02em;line-height:1.2;color:var(--ink);
  margin-bottom:10px;
}
.modal .lede{
  font-family:'Fraunces',serif;font-size:15px;color:var(--ink-soft);
  line-height:1.5;margin-bottom:20px;
}
.modal .price{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.modal .price b{color:var(--ink);font-weight:400;}
.modal ul{list-style:none;padding:0;margin-bottom:24px;}
.modal li{
  padding:9px 0;font-family:'Fraunces',serif;font-size:15px;color:var(--ink);
  display:flex;align-items:baseline;gap:10px;line-height:1.4;
}
.modal li::before{content:'·';color:var(--gold);font-size:24px;line-height:0;}
.modal .cta{
  width:100%;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);padding:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
}
.modal .cta:hover,.modal .cta:focus-visible{background:var(--accent);border-color:var(--accent);}
.modal .fine{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  text-align:center;margin-top:12px;
}
.modal .free-note{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'Fraunces',serif;font-style:italic;font-size:13px;
  color:var(--ink-soft);text-align:center;line-height:1.5;
}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:all .3s;z-index:30;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  display:inline-block;margin-right:8px;
  animation:pulse 2.4s ease-in-out infinite;vertical-align:middle;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.7);opacity:.5;}}

noscript .noscript-note{
  position:fixed;inset:0;z-index:40;background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:40px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:18px;
}

@media (max-width:380px){
  header,main,footer{padding-left:20px;padding-right:20px;}
  .sheet-head,.sheet-body{padding-left:20px;padding-right:20px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}