/* Shared by every page of the website. Tokens from the Paperwork app:
   Assets.xcassets (Palette), Typography, Metrics and Motion.
   Libre Franklin: Copyright 2020 The Libre Franklin Project Authors,
   SIL Open Font License 1.1 (openfontlicense.org). */
@font-face{font-family:"Libre Franklin";src:url(fonts/LibreFranklin-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/LibreFranklin-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/LibreFranklin-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
  --surface-base:#ededea;--surface-card:#ffffff;--surface-sunken:#f6f5f3;--surface-accent:#f2e1e2;
  --line-divider:#d9d5cf;--line-border:#e7e3dd;
  --ink-primary:#1b1a18;--ink-secondary:#3e3c38;--ink-tertiary:#6b6862;--ink-on-accent:#ffffff;
  --accent:#7a2b33;
  --status-open:#3e5566;--status-soon:#8a6212;--status-overdue:#c0391b;--status-done:#37613f;
  
  /* The burgundy ground of the store tiles, lit from above. */
  --brand:#7a2b33;--brand-light:#8c3741;--brand-deep:#68232b;
  --on-brand:#ffffff;--on-brand-soft:#f2e1e2;--on-brand-line:rgb(255 255 255 / .22);
  
  /* The paper the app draws documents on: always light. */
  --paper:#ffffff;--paper-line:#d9d5cf;--paper-border:#e7e3dd;
  --paper-ink:#1b1a18;--paper-ink-2:#3e3c38;--paper-ink-3:#6b6862;--paper-bar:#e4e0da;--paper-accent:#7a2b33;
  --shadow-sheet:0 6px 16px rgb(30 5 10 / .16),0 1px 3px rgb(30 5 10 / .12);
  --shadow-lift:0 14px 32px rgb(30 5 10 / .26),0 3px 8px rgb(30 5 10 / .16);
  
  --space-tight:4px;--space-snug:8px;--space-compact:12px;--space-regular:16px;--space-loose:24px;--space-section:32px;
  --radius-small:5px;--radius-card:10px;--radius-large:16px;--radius-full:999px;
  --gutter:16px;--content:1180px;--header-h:60px;
  
  /* Motion.foundPlace (spring 0.5 s, bounce 0.35), Motion's snappy and smooth. */
  --spring-found:linear(0,.043,.148,.287,.436,.581,.711,.82,.907,.973,1.019,1.047,1.063,1.068,1.066,1.059,1.05,1.04,1.03,1.021,1.013,1.007,1.002,.999,.997,.996,.995,.995,1);
  --spring-snappy:linear(0,.075,.235,.413,.576,.71,.812,.886,.936,.968,.988,.999,1.004,1.006,1.006,1.005,1.004,1.003,1.002,1.002,1);
  --ease-smooth:linear(0,.067,.205,.358,.499,.619,.715,.79,.848,.89,.921,.944,.96,.972,.981,.986,.991,.993,.995,.997,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface-base:#151412;--surface-card:#1f1d1a;--surface-sunken:#100f0d;--surface-accent:#3b2125;
  --line-divider:#35312b;--line-border:#2b2722;
  --ink-primary:#f3f1ed;--ink-secondary:#cbc6be;--ink-tertiary:#948f86;--ink-on-accent:#151412;
  --accent:#e4949b;
  --status-open:#9cbbd1;--status-soon:#e3b863;--status-overdue:#f2907a;--status-done:#86be90;
  --brand:#4d2124;--brand-light:#5c272b;--brand-deep:#3d1a1d;
  --on-brand-soft:#ead3d5;--on-brand-line:rgb(255 255 255 / .18);
  --paper:#f3f1ed;--paper-line:#d2cdc5;--paper-border:#d9d5cf;
  --shadow-sheet:0 6px 16px rgb(0 0 0 / .38),0 1px 3px rgb(0 0 0 / .3);
  --shadow-lift:0 14px 32px rgb(0 0 0 / .5),0 3px 8px rgb(0 0 0 / .32);
}}
:root[data-theme="dark"]{
  --surface-base:#151412;--surface-card:#1f1d1a;--surface-sunken:#100f0d;--surface-accent:#3b2125;
  --line-divider:#35312b;--line-border:#2b2722;
  --ink-primary:#f3f1ed;--ink-secondary:#cbc6be;--ink-tertiary:#948f86;--ink-on-accent:#151412;
  --accent:#e4949b;
  --status-open:#9cbbd1;--status-soon:#e3b863;--status-overdue:#f2907a;--status-done:#86be90;
  --brand:#4d2124;--brand-light:#5c272b;--brand-deep:#3d1a1d;
  --on-brand-soft:#ead3d5;--on-brand-line:rgb(255 255 255 / .18);
  --paper:#f3f1ed;--paper-line:#d2cdc5;--paper-border:#d9d5cf;
  --shadow-sheet:0 6px 16px rgb(0 0 0 / .38),0 1px 3px rgb(0 0 0 / .3);
  --shadow-lift:0 14px 32px rgb(0 0 0 / .5),0 3px 8px rgb(0 0 0 / .32);
}
@media (min-width:600px){:root{--gutter:24px;--header-h:64px}}
@media (min-width:900px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-regular));
  scrollbar-color:var(--line-divider) transparent;accent-color:var(--accent);caret-color:var(--accent)}
body{margin:0;min-height:100vh;background:var(--surface-base);color:var(--ink-primary);
  font:400 17px/1.55 "Libre Franklin",-apple-system,system-ui,sans-serif;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* A quick second tap, on a button or a filter say, must not zoom the page;
   pinching still does, for anyone who needs larger text. */
html,html *{touch-action:manipulation}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--surface-accent);color:var(--accent)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-small)}
.tone-brand :focus-visible,.site-header[data-tone="brand"] :focus-visible{outline-color:var(--on-brand)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:var(--space-snug) var(--space-compact);
  background:var(--surface-card);color:var(--ink-primary);border-radius:var(--radius-card);font-weight:500;text-decoration:none;box-shadow:var(--shadow-sheet)}
.skip-link:focus{top:var(--space-snug)}

.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- The found-place frame from the icon ---------- */
.frame-word{position:relative;display:inline-block;white-space:nowrap;padding:0 .12em;margin:0 .03em 0 0;isolation:isolate}
.frame-word::before{content:"";position:absolute;inset:.04em -.02em -.02em;z-index:-1;border-radius:.16em;
  border:max(2px,.055em) solid var(--frame-line,var(--accent));background:var(--frame-fill,var(--surface-accent))}
.tone-brand .frame-word{--frame-line:var(--on-brand);--frame-fill:rgb(255 255 255 / .14)}
.js .frame-word[data-find]::before{opacity:0;transform:scale(1.15)}
.js .frame-word[data-find].is-found::before{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .7s var(--spring-found)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:20;height:var(--header-h);color:var(--ink-primary);background:var(--surface-base);
  border-bottom:1px solid transparent;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),transform .35s var(--ease-smooth)}
.site-header.is-tucked{transform:translateY(-100%)}
.js .site-header{position:sticky;top:0}
.site-header[data-tone="brand"]{color:var(--on-brand);background:transparent}
.site-header[data-tone="brand"].is-scrolled:not(.is-solid){background:var(--brand);border-bottom-color:var(--on-brand-line)}
.site-header.is-solid{color:var(--ink-primary);background:var(--surface-base);border-bottom-color:var(--line-divider)}
.site-header--overlay{margin-bottom:calc(-1 * var(--header-h))}
.site-header__inner{display:flex;align-items:center;gap:var(--space-regular);height:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.site-nav{display:none;gap:var(--space-loose);margin-left:auto}
.site-nav a,.lang-link{color:inherit;text-decoration:none;font-weight:500;font-size:15px}
.site-nav a:hover,.lang-link:hover{text-decoration:underline;text-underline-offset:.3em}
.lang-link{margin-left:auto;padding:var(--space-snug) 2px}
@media (min-width:900px){.site-nav{display:flex}.lang-link{margin-left:0}}

.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;flex:none;
  --logo-back:#dcd7cf;--logo-sheet:#ffffff;--logo-head:#a9a39a;--logo-text:#d9d5cf;--logo-marker:#f2e1e2;--logo-value:#9e6268;--logo-frame:#7a2b33}
.brand__sheet{width:auto;height:32px}
.brand__name{width:auto;height:17px;fill:currentColor;margin-top:3px}
.brand--small .brand__sheet{height:26px}
.brand--small .brand__name{height:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-header:not([data-tone="brand"]) .brand,:root:not([data-theme="light"]) .site-header.is-solid .brand,:root:not([data-theme="light"]) .site-footer .brand{
  --logo-back:#2b2825;--logo-sheet:#36332e;--logo-head:#85837e;--logo-text:#585550;--logo-marker:#3b2125;--logo-value:#ba777e;--logo-frame:#e4949b}}
:root[data-theme="dark"] .site-header:not([data-tone="brand"]) .brand,:root[data-theme="dark"] .site-header.is-solid .brand,:root[data-theme="dark"] .site-footer .brand{
  --logo-back:#2b2825;--logo-sheet:#36332e;--logo-head:#85837e;--logo-text:#585550;--logo-marker:#3b2125;--logo-value:#ba777e;--logo-frame:#e4949b}

/* ---------- App Store button ---------- */
.store-cta{display:inline-flex;align-items:center;gap:var(--space-snug);margin:0;flex:none;min-height:44px;
  font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;border-radius:var(--radius-full)}
.store-cta--link{gap:var(--space-snug);padding:0 18px 0 20px;color:var(--ink-on-accent);background:var(--accent);transition:transform .25s var(--spring-snappy)}
.store-cta--link:hover{transform:translateY(-1px)}
.store-cta--link .icon{width:16px;height:16px;stroke-width:2}
.tone-brand .store-cta--link,.site-header[data-tone="brand"]:not(.is-solid) .store-cta--link{color:var(--brand);background:var(--on-brand)}
.store-cta--badge{min-height:0;border-radius:9px}
.store-cta--badge img{height:48px;width:auto}
.site-header .store-cta{min-height:36px;font-size:14px}
.site-header .store-cta--link{padding:0 12px 0 14px}
.site-header .store-cta--badge img{height:36px}
.store-cta__short{display:none}
@media (max-width:599px){.site-header .store-cta__long{display:none}.site-header .store-cta__short{display:inline}}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-base);color:var(--ink-secondary);font-size:15px;border-top:1px solid var(--line-divider)}
.site-footer__inner{display:grid;gap:var(--space-loose);max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:var(--space-section) var(--gutter) calc(var(--space-section) + env(safe-area-inset-bottom))}
.site-footer .brand{color:var(--ink-primary)}
.site-footer p{margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-snug) var(--space-loose)}
.site-footer nav a{color:var(--ink-primary);text-decoration:none;font-weight:500;min-height:32px;display:inline-flex;align-items:center}
.site-footer nav a:hover{text-decoration:underline}
@media (min-width:900px){.site-footer__inner{grid-template-columns:auto 1fr auto;align-items:center}.site-footer nav{justify-content:flex-end}}

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