/* Identity — the second private product shell.
   Deliberately not Seasons: where Seasons is warm paper, soft radii and
   Fraunces, Identity is a cool engraved plate — Spectral, hairline rules,
   near-square corners, and a tally that reads as a ledger rather than a card. */

@font-face{font-family:Spectral;src:url("/fonts/spectral-400-normal-latin.woff2") format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Spectral;src:url("/fonts/spectral-600-normal-latin.woff2") format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Spectral;src:url("/fonts/spectral-700-normal-latin.woff2") format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Spectral;src:url("/fonts/spectral-400-italic-latin.woff2") format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Source Sans 3;src:url("/fonts/source-sans-3-variable-normal-latin.woff2") format('woff2');font-style:normal;font-weight:200 900;font-display:swap}

:root,[data-identity-theme=slate]{--surface:#eef1f3;--raised:#fbfcfd;--ink:#161c21;--muted:#5a656e;--rule:#c9d3d9;--field:#7f8a92;--accent:#2f5d78;--soft:#dbe5eb;--mark:#2f5d78;--alert:#a04444}
[data-identity-theme=ember]{--surface:#f4efea;--raised:#fdfaf7;--ink:#211a15;--muted:#6c5f53;--rule:#dbcdbf;--field:#938578;--accent:#934f25;--soft:#ecdccd;--mark:#934f25;--alert:#a04444}
[data-identity-theme=indigo]{--surface:#eeeef5;--raised:#fbfbfe;--ink:#181a26;--muted:#5d6076;--rule:#cbcddc;--field:#83869a;--accent:#464b8f;--soft:#dcdeee;--mark:#464b8f;--alert:#a04444}
[data-identity-theme=moss]{--surface:#edf2ec;--raised:#fafcfa;--ink:#161d18;--muted:#5a675c;--rule:#c9d6c8;--field:#7f8c80;--accent:#3d6b45;--soft:#dbe6da;--mark:#3d6b45;--alert:#a04444}

[data-identity-appearance=dark][data-identity-theme=slate]{--surface:#101418;--raised:#181e24;--ink:#e6edf2;--muted:#9fadb7;--rule:#2b343c;--field:#606c75;--accent:#7fb3d0;--soft:#1d2a33;--mark:#7fb3d0;--alert:#d97a7a}
[data-identity-appearance=dark][data-identity-theme=ember]{--surface:#17130f;--raised:#201a15;--ink:#f2e9e0;--muted:#b3a496;--rule:#362d25;--field:#73675c;--accent:#dd9761;--soft:#2c2118;--mark:#dd9761;--alert:#d97a7a}
[data-identity-appearance=dark][data-identity-theme=indigo]{--surface:#111219;--raised:#191b25;--ink:#e8e9f4;--muted:#a0a3ba;--rule:#2c2f3e;--field:#65687b;--accent:#9195d8;--soft:#202331;--mark:#9195d8;--alert:#d97a7a}
[data-identity-appearance=dark][data-identity-theme=moss]{--surface:#101410;--raised:#181d18;--ink:#e6efe6;--muted:#9db09f;--rule:#2a342b;--field:#5f6d60;--accent:#8cbb92;--soft:#1c271e;--mark:#8cbb92;--alert:#d97a7a}

@media(prefers-color-scheme:dark){
  [data-identity-appearance=system][data-identity-theme=slate]{--surface:#101418;--raised:#181e24;--ink:#e6edf2;--muted:#9fadb7;--rule:#2b343c;--field:#606c75;--accent:#7fb3d0;--soft:#1d2a33;--mark:#7fb3d0;--alert:#d97a7a}
  [data-identity-appearance=system][data-identity-theme=ember]{--surface:#17130f;--raised:#201a15;--ink:#f2e9e0;--muted:#b3a496;--rule:#362d25;--field:#73675c;--accent:#dd9761;--soft:#2c2118;--mark:#dd9761;--alert:#d97a7a}
  [data-identity-appearance=system][data-identity-theme=indigo]{--surface:#111219;--raised:#191b25;--ink:#e8e9f4;--muted:#a0a3ba;--rule:#2c2f3e;--field:#65687b;--accent:#9195d8;--soft:#202331;--mark:#9195d8;--alert:#d97a7a}
  [data-identity-appearance=system][data-identity-theme=moss]{--surface:#101410;--raised:#181d18;--ink:#e6efe6;--muted:#9db09f;--rule:#2a342b;--field:#5f6d60;--accent:#8cbb92;--soft:#1c271e;--mark:#8cbb92;--alert:#d97a7a}
}

*{box-sizing:border-box}
html{background:var(--surface);color:var(--ink);font-size:17px}
body{margin:0;font-family:"Source Sans 3",system-ui,sans-serif;background:var(--surface);color:var(--ink);line-height:1.55;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3,.statement,.tally strong,.wordmark{font-family:Spectral,Georgia,serif;font-weight:600}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem);line-height:1.04;letter-spacing:-.02em;margin:.25em 0}
h2{font-size:clamp(1.4rem,2.7vw,2.05rem);line-height:1.15;margin:.4em 0}
h3{font-size:1.05rem;margin:0 0 .3em}
p{margin:.5em 0}

.identities-header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);z-index:10}
.identities-nav{max-width:1080px;margin:auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
/* HourLife → this app. The parent is deliberately quieter than the app's own
   name: it is the way out, not the title of the page you are on. */
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-home{display:flex;align-items:center;gap:8px;flex:none;font-weight:700;font-size:.95rem;color:var(--muted)}
.brand-home:hover{color:var(--ink)}
.brand-home img{display:block;width:24px;height:24px}
.brand-divider{flex:none;width:1px;height:21px;background:var(--rule)}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a[aria-current=page]{color:var(--accent)}

.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:6px;padding:13px 21px;background:var(--ink);color:var(--surface);font:700 .98rem "Source Sans 3";cursor:pointer}
.button:hover{opacity:.86}
.button-small{padding:8px 13px;font-size:.87rem}
.button-quiet{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.text-link,.text-button{color:var(--accent);font-weight:700}
.text-button{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.muted{color:var(--muted)}
/* The way back up from a detail page. Normal case, sitting above the plate as
   navigation rather than as a label for it. */
.back-link{margin:0;font-weight:600}
.back-link a{color:var(--accent)}
.flash{max-width:720px;margin:18px auto 0;padding:12px 18px;border-left:3px solid var(--accent);background:var(--soft)}
.flash-alert,.errors{border-color:var(--alert)}
.errors{padding:14px 16px;border-left:3px solid var(--alert);background:var(--soft);margin-bottom:20px}
.errors ul{margin:0;padding-left:18px}

/* One column width site-wide, shared with the nav so the wordmark sits directly
   above the page's left edge rather than near it. Prose inside is capped
   separately — the width is here for the card grids, not for the sentences. */
.landing-hero,.landing-section,.app-page,.composer-page{max-width:1080px;margin:0 auto;padding:clamp(46px,7vw,92px) 24px}
.landing-hero>.lede{max-width:660px;font-size:1.2rem;color:var(--muted)}
.app-page>header p.muted,.composer-page>header p.muted,.detail-section>p.muted{max-width:68ch}
.hero-actions{display:flex;align-items:center;gap:22px;margin:28px 0 46px}

/* The plate — an identity set as an engraved nameplate. */
.plate{background:var(--raised);border:1px solid var(--rule);border-radius:8px;padding:clamp(22px,4.5vw,40px)}
.plate+.plate{margin-top:18px}
.statement{font-size:clamp(1.35rem,3.1vw,1.95rem);line-height:1.28;margin:.35em 0 .5em}
.plate-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;color:var(--muted);font-size:.9rem}
/* The aspect sits under the statement it qualifies, never above it as a kicker. */
.aspect-tag{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:2px 11px;font-size:.85rem;font-weight:600;color:var(--accent)}

/* The tally — cumulative votes, never a streak. */
.tally{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
.tally strong{font-size:clamp(2.4rem,6vw,3.6rem);line-height:.9;color:var(--accent)}
.tally span{color:var(--muted)}
.rate{font-variant-numeric:tabular-nums}

.action-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.action-list li{border-bottom:1px solid var(--rule);padding:15px 0;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.action-list h3{font-family:"Source Sans 3",sans-serif;font-weight:700;font-size:1rem}
.action-list p{margin:.15em 0 0;color:var(--muted);font-size:.92rem}
.provenance{font-size:.8rem;color:var(--muted)}
.provenance a{color:var(--accent);font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.action-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;white-space:nowrap}

/* The vote control. Square, stamped — pressing it is the whole daily loop. */
.mark{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:6px;background:var(--raised);color:var(--ink);font:700 .9rem "Source Sans 3";padding:10px 15px;cursor:pointer}
.mark i{width:15px;height:15px;border:1.5px solid var(--muted);border-radius:3px;display:block;flex:none}
.mark:hover{border-color:var(--accent)}
.mark[aria-pressed=true]{background:var(--soft);border-color:var(--mark);color:var(--mark)}
.mark[aria-pressed=true] i{background:var(--mark);border-color:var(--mark);position:relative}
.mark[aria-pressed=true] i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--raised);border-width:0 2px 2px 0;transform:rotate(42deg)}

.aspect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-top:26px}
.aspect-choice input{position:absolute;opacity:0}
.aspect-choice>span{display:block;border:1px solid var(--rule);border-radius:8px;padding:15px 16px;cursor:pointer;height:100%;background:var(--raised)}
.aspect-choice>span b{display:block;font-family:Spectral,Georgia,serif;font-size:1.12rem;margin-bottom:3px}
.aspect-choice>span small{color:var(--muted);line-height:1.4;display:block}
.aspect-choice input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.aspect-choice input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

.composer{display:grid;gap:26px}
.composer fieldset{border:1px solid var(--rule);border-radius:8px;background:var(--raised);padding:clamp(18px,4vw,30px);margin:0}
.composer legend{font-family:Spectral,Georgia,serif;font-size:1.3rem;font-weight:600;padding:0 10px}
.composer legend span{color:var(--accent);margin-right:7px}
.composer label{display:block;font-weight:700;margin:14px 0 6px}
/* Choice controls are labels too, so the field-label weight and margin above
   reach every word inside a card. They opt back out. */
.composer .pick,.composer .aspect-choice,.composer .choice,.composer .theme-choice{font-weight:400;margin:0}
/* --field, not --rule: a text box is identified by its edge alone, so the edge
   holds 3:1 against both the field and the plate it sits on. */
.composer input[type=text],.composer textarea,.composer select,.inline-form input,.inline-form textarea{width:100%;border:1px solid var(--field);border-radius:6px;padding:12px 13px;background:var(--surface);color:var(--ink);font:inherit}
.composer textarea{min-height:76px;resize:vertical}
.composer ::placeholder,.inline-form ::placeholder{color:var(--muted);opacity:1}

/* Suggestion picker — each card names the book it came from.
   The card is a two-column grid of exactly two children: the box and the text
   block. The three lines of copy are stacked inside .pick-text rather than left
   loose in the card, because loose inline children become grid items of their
   own and wrap into columns instead of lines. */
.suggestions{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.pick{display:block;height:100%}
.pick input{position:absolute;opacity:0}
.pick>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;height:100%;border:1px solid var(--rule);border-radius:8px;padding:15px 17px;cursor:pointer;background:var(--surface)}
.pick>span:hover{border-color:var(--accent)}
.pick-box{display:block;position:relative;flex:none;width:18px;height:18px;margin-top:2px;border:1.5px solid var(--muted);border-radius:4px}
.pick input:checked+span{border-color:var(--accent);background:var(--soft)}
.pick input:checked+span .pick-box{background:var(--mark);border-color:var(--mark)}
.pick input:checked+span .pick-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(42deg)}
.pick input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.pick input:disabled+span{opacity:.45;cursor:not-allowed}
.pick-text{display:block;min-width:0;overflow-wrap:break-word}
.pick-text b{display:block;font-weight:700;font-size:1rem;line-height:1.35}
.pick-text small{display:block;color:var(--muted);font-size:.88rem;line-height:1.45;margin-top:4px}
.pick-text .provenance{margin-top:8px;font-size:.78rem}
.pick-count{margin-top:16px;font-weight:700;color:var(--accent)}
.pick-count[data-full=true]{color:var(--alert)}

/* The record — eight weeks of days, read as density rather than a streak.
   There is no "broken" state here on purpose: a blank square is a day, not a
   failure, so it is drawn in the same rule colour as everything else. */
.record{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:4px;margin:18px 0 10px;max-width:100%;overflow-x:auto}
.record span{width:14px;height:14px;border-radius:3px;border:1px solid var(--rule);background:transparent}
.record span[data-level="1"]{background:color-mix(in srgb,var(--mark) 34%,transparent);border-color:transparent}
.record span[data-level="2"]{background:color-mix(in srgb,var(--mark) 62%,transparent);border-color:transparent}
.record span[data-level="3"]{background:var(--mark);border-color:transparent}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.step-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:24px}
.step-actions .text-button,.step-actions .text-link{margin-right:auto}
.inline-form{display:grid;gap:10px;margin-top:18px}
.detail-section{border:1px solid var(--rule);border-radius:8px;background:var(--raised);padding:clamp(18px,4vw,30px);margin-top:18px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.principles article{border-top:2px solid var(--accent);padding-top:12px}
.empty-state{padding:44px 0;max-width:600px}
.empty-state p{font-size:1.15rem;color:var(--muted);margin-bottom:24px}
.secondary-actions{padding:14px 0 46px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.theme-choice input{position:absolute;opacity:0}
.theme-swatch{display:grid;gap:8px;border:2px solid var(--rule);border-radius:8px;padding:8px;cursor:pointer}
.theme-swatch i{height:48px;border-radius:4px;background:linear-gradient(135deg,var(--theme-surface),var(--theme-accent))}
.theme-choice[data-preview-theme=slate]{--theme-surface:#eef1f3;--theme-accent:#2f5d78}
.theme-choice[data-preview-theme=ember]{--theme-surface:#f4efea;--theme-accent:#934f25}
.theme-choice[data-preview-theme=indigo]{--theme-surface:#eeeef5;--theme-accent:#464b8f}
.theme-choice[data-preview-theme=moss]{--theme-surface:#edf2ec;--theme-accent:#3d6b45}
.theme-choice input:checked+.theme-swatch{border-color:var(--accent)}
.theme-choice input:focus-visible+.theme-swatch{outline:3px solid var(--accent);outline-offset:2px}
.choice-row{display:flex;gap:10px;flex-wrap:wrap}
.choice{margin:0!important}
.choice input{position:absolute;opacity:0}
.choice span{display:block;border:1px solid var(--rule);border-radius:6px;padding:10px 15px;cursor:pointer}
.choice input:checked+span{background:var(--soft);border-color:var(--accent);color:var(--accent)}
.choice input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

.account-menu{position:relative}
.account-menu summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-weight:700}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary>span:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--accent)}
.account-menu>div{position:absolute;right:0;top:calc(100% + 12px);width:min(280px,80vw);padding:16px;border:1px solid var(--rule);border-radius:8px;background:var(--raised);box-shadow:0 18px 45px color-mix(in srgb,var(--ink) 16%,transparent)}
.account-menu p{overflow-wrap:anywhere;color:var(--muted);font-size:.9rem}
.account-menu .account-home{display:block;margin:12px 0 10px;padding-top:12px;border-top:1px solid var(--rule);color:var(--accent);font-weight:700}
.identities-mobile-nav{display:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

@media(max-width:760px){
  html{font-size:16px}
  .identities-body{padding-bottom:70px}
  .identities-nav{padding:11px 16px}
  .identities-header .nav-links>a:not(.button){display:none}
  .landing-hero,.landing-section,.app-page,.composer-page{padding-left:18px;padding-right:18px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:14px}
  .principles{grid-template-columns:1fr}
  .action-list li{grid-template-columns:1fr}
  .theme-grid{grid-template-columns:1fr 1fr}
  .account-label{display:none}
  /* Once the word goes, the 24px mark is the whole way back out. The padding
     brings the hit area to 44px and the negative margin keeps it looking as if
     it never grew. */
  .brand-name{display:none}
  .brand-home{padding:10px;margin:-10px}
  .identities-mobile-nav{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);padding:max(9px,env(safe-area-inset-bottom)) 8px 9px;border-top:1px solid var(--rule);background:color-mix(in srgb,var(--raised) 94%,transparent);backdrop-filter:blur(16px)}
  .identities-mobile-nav a{text-align:center;font-weight:700;font-size:.8rem;color:var(--muted)}
  .identities-mobile-nav a[aria-current=page]{color:var(--accent)}
}

@media(prefers-reduced-motion:no-preference){
  a,.button,.mark,.pick>span,.aspect-choice>span{transition:color .16s,background .16s,border-color .16s,opacity .16s}
}