/* ink. brand v6: EB Garamond + DM Sans, white paper, black type, splat ink, one red accent */
  /* Self-hosted, as on inkinteractive.com.au (brand guidelines 05). Latin subset. */
  @font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2')}
  @font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2')}
  @font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2')}
  @font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
  @font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
  @font-face { font-family:'EB Garamond fallback'; src: local('Times New Roman'), local('Liberation Serif'); size-adjust:94.43%; ascent-override:106.64%; descent-override:31.56%; line-gap-override:0%; }
  @font-face { font-family:'DM Sans fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust:104.6%; ascent-override:94.84%; descent-override:29.64%; line-gap-override:0%; }
  :root {
    --serif: 'EB Garamond', 'EB Garamond fallback', serif;
    --sans: 'DM Sans', 'DM Sans fallback', system-ui, sans-serif;
    --paper:#FFFFFF; --text:#000000; --mark:#231F20; --red:#E61900; --grey:#707070; --edge:#888888;
    --hair:#DCDCDC; --soft:#F5F5F5; --card:#FFFFFF; --btn-bg:#000000; --btn-fg:#FFFFFF; --tray:#000000;
    --scrim:rgba(0,0,0,.45); --splash:#000000; --splash-op:.85;
    --side:16px; --btn-h:88px;
  }
  .paper-evening { --paper:#F5F5F5; --card:#FFFFFF; --soft:#FFFFFF; --red:#D41700; }
  .paper-night { --paper:#231F20; --text:#F5F5F5; --mark:#B5B0AE; --red:#FF5A3C; --grey:#B5B0AE; --edge:#8A8485;
    --hair:#4A4445; --soft:#2E292A; --card:#2E292A; --btn-bg:#F5F5F5; --btn-fg:#231F20; --tray:#2E292A;
    --scrim:rgba(0,0,0,.6); --splash:#B5B0AE; --splash-op:1; }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { margin:0; height:100%; background:var(--paper); color:var(--text); font-family:var(--serif); overscroll-behavior:none; }
  body { overflow:hidden; user-select:none; -webkit-user-select:none; transition: background .3s; }
  /* a phone-width column on wider screens; the app never stretches */
  :root { --app-w:480px; }
  .app { position:fixed; top:0; bottom:0; left:0; right:0; margin:0 auto; width:100%; max-width:var(--app-w); display:flex; flex-direction:column; }
  @media (min-width:521px) { .app { border-left:1px solid var(--hair); border-right:1px solid var(--hair); } }
  :focus-visible { outline:2px solid var(--red); outline-offset:2px; }

  header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    padding: calc(env(safe-area-inset-top) + 10px) var(--side) 8px; height: calc(env(safe-area-inset-top) + 62px); }
  .logo { background:none; border:0; padding:6px; margin:-6px; cursor:pointer; line-height:0; }
  .splat { width:auto; height:32px; display:block; }
  .splat path { fill:var(--mark); }
  .paper-night .splat path { fill:#F5F5F5; }
  .date { text-align:right; font-family:var(--sans); font-size:15px; color:var(--text); line-height:1.2; }
  .date small { display:block; font-size:13px; color:var(--grey); }

  .viewport { flex:1 1 auto; position:relative; overflow:hidden; touch-action:pan-y; }
  .track { position:absolute; inset:0; width:300%; display:flex; will-change:transform; }
  .pane { width:33.3333%; height:100%; padding: 2px var(--side) 24px; position:relative; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
  .pane-label { font-family:var(--sans); font-weight:500; font-size:14px; color:var(--grey); margin:4px 2px 12px; min-height:18px; }

  .list { display:flex; flex-direction:column; }
  .task { position:relative; display:grid; grid-template-columns: 26px 1fr 24px; align-items:center; column-gap:12px;
    width:100%; height:var(--btn-h); margin:0 0 12px; padding:0 16px 0 16px; text-align:left;
    border:1px solid var(--hair); border-radius:4px; background:var(--card); color:var(--text); font:inherit; overflow:hidden; cursor:pointer;
    transition: transform .12s ease; }
  .task.pressed { transform:scale(.98); }
  .task .num { font-family:var(--sans); font-weight:500; font-size:14px; color:var(--red); align-self:start; margin-top:21px; }
  .task .txt { min-width:0; transition: opacity .2s ease; }
  .task .title { font-family:var(--serif); font-size:24px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .task .sub { font-family:var(--sans); font-size:14px; color:var(--grey); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .task .sub .flag { font-weight:500; color:var(--text); }
  .task .sub .flag.overdue { color:var(--red); }
  .task .src { width:22px; height:22px; color:var(--grey); }
  .task svg.ink { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .task.struck { overflow:visible; z-index:2; }
  .task.struck .txt, .task.struck .num, .task.struck .src { opacity:.4; }
  .pane.tomorrow .task .txt, .pane.tomorrow .task .num { opacity:.7; }
  .ink path, .ink use { fill:var(--mark); }
  .ink path.fading { transition: opacity .2s ease; opacity:0; }
  .frag { transform-box: fill-box; transform-origin: center; }

  .note { text-align:center; font-family:var(--serif); font-style:italic; color:var(--grey); font-size:18px; margin-top:6px; }

  .reward { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 28px 24px; }
  .reward.show { display:flex; }
  .reward .splash { width:200px; height:auto; overflow:visible; }
  .splash > g { fill:var(--splash); opacity:var(--splash-op); }
  .paper-night .splash .cls-3, .paper-night .splash .cls-4 { display:none; }
  .reward.show .splash { animation: stamp .55s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes stamp { 0% { transform:scale(.55) rotate(-4deg); opacity:0; } 60% { opacity:1; } 100% { transform:none; opacity:1; } }
  .reward h2 { font-family:var(--serif); font-weight:400; font-size:44px; line-height:1; margin:18px 0 22px; letter-spacing:-0.01em; }
  .otd { max-width:340px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:16px 4px; opacity:0; }
  .reward.show .otd { animation: rise .5s .7s ease-out forwards; }
  .otd-label { font-family:var(--sans); font-size:13px; color:var(--grey); margin-bottom:8px; }
  .otd-label b { font-weight:500; font-size:14px; color:var(--red); }
  .otd-text { font-family:var(--serif); font-size:20px; line-height:1.4; margin:0; }
  .nudge { max-width:320px; font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.4; color:var(--grey); margin:18px 0 12px; opacity:0; }
  .reward.show .nudge { animation: rise .5s 1.05s ease-out forwards; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .linkish { background:none; border:0; color:var(--grey); font-family:var(--serif); font-style:italic; font-size:18px;
    text-decoration:none; padding:12px; cursor:pointer; }

  .done-scroll { position:absolute; inset:0; overflow:auto; padding: 2px var(--side) 90px; touch-action:pan-y; }
  .done-summary { font-family:var(--serif); font-size:30px; line-height:1.1; margin:0 2px 6px; }
  .done-group { font-family:var(--sans); font-weight:500; font-size:14px; color:var(--grey); margin:18px 2px 4px; }
  .coming { margin-top:36px; }
  .coming-item { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 2px; border-bottom:1px solid var(--hair); cursor:pointer; }
  .coming-item:first-of-type { border-top:1px solid var(--hair); }
  .coming-item .ct { font-family:var(--serif); font-size:19px; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .coming-item .cw { font-family:var(--sans); font-size:13px; color:var(--grey); white-space:nowrap; flex:none; }
  @media (hover:hover) { .coming-item:hover .ct { color:var(--red); } }
  .done-item { position:relative; padding:14px 2px; border-bottom:1px solid var(--hair); font-family:var(--serif); font-size:21px; cursor:pointer; }
  .done-item .t { position:relative; display:inline-block; padding:0 6px; margin-left:-6px; }
  .done-item .t span { position:relative; z-index:1; color:var(--grey);
    /* a paper-coloured halo so the title cuts through its splashes */
    text-shadow:0 0 1px var(--paper),0 0 1px var(--paper),0 0 2px var(--paper),0 0 2px var(--paper); }
  .done-item svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; opacity:.9; }
  .done-item svg use { fill:var(--mark); }
  .empty-done { font-family:var(--serif); font-style:italic; color:var(--grey); font-size:19px; margin:18px 2px; line-height:1.5; }

  footer { flex:0 0 auto; height: calc(env(safe-area-inset-bottom) + 44px); display:flex; justify-content:center; align-items:flex-start; padding-top:14px; gap:9px; }
  .dot { width:7px; height:7px; border-radius:50%; background-color:var(--hair); transition: background .2s; border:0; padding:0; cursor:pointer;
    box-sizing:content-box; background-clip:content-box; padding:8px; margin:-8px -4px; }
  .dot.on { background-color:var(--text); }

  .fab { position:fixed; right:max(18px, calc((100vw - var(--app-w)) / 2 + 18px)); bottom: calc(env(safe-area-inset-bottom) + 12px); width:48px; height:48px; border-radius:50%;
    border:1px solid var(--edge); background:var(--paper); color:var(--text); font-family:var(--sans); font-size:26px; font-weight:400; line-height:1; cursor:pointer; z-index:5; }

  .toast { position:fixed; left:16px; right:16px; margin:0 auto; max-width:calc(var(--app-w) - 32px); bottom: calc(env(safe-area-inset-bottom) + 70px);
    transform: translateY(20px); opacity:0; background:var(--tray); color:#fff; border:2px solid var(--paper); border-radius:30px;
    padding:6px 6px 6px 20px; display:flex; gap:14px; align-items:center; justify-content:space-between;
    font-family:var(--sans); font-size:15px; min-height:52px; transition: opacity .2s, transform .2s; pointer-events:none; z-index:30; }
  .toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
  .toast span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .toast button { flex:0 0 auto; background:#fff; color:#000; border:0; border-radius:30px; height:40px; padding:0 16px; font-family:var(--sans); font-size:15px; cursor:pointer; }
  .paper-night .toast { background:#F5F5F5; color:#231F20; }
  .paper-night .toast button { background:#231F20; color:#F5F5F5; }

  .scrim { position:fixed; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s; z-index:20; }
  .scrim.show { opacity:1; pointer-events:auto; }
  .sheet { position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:var(--app-w); max-height:86%; background:var(--paper); border-radius:16px 16px 0 0; z-index:21;
    transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; touch-action:none; }
  .sheet.show { transform: translateY(0); }
  .grab { width:40px; height:4px; border-radius:2px; background:var(--hair); margin:10px auto 2px; flex:0 0 auto; }
  .sheet-body { flex:1; overflow:auto; margin-top:30px; padding: 0 22px calc(env(safe-area-inset-bottom) + 22px); touch-action:pan-y; }
  .sheet h2 { font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.1; margin:4px 0 12px; }
  .why { font-family:var(--serif); font-size:20px; line-height:1.5; margin:0 0 16px; }
  .facts { border-top:1px solid var(--hair); margin:0 0 18px; }
  .facts div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); font-family:var(--sans); font-size:15px; }
  .facts span:first-child { text-transform:lowercase; font-weight:500; font-size:14px; color:var(--grey); }
  .excerpt { font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.5; color:var(--grey); margin:0 0 4px; padding-left:14px; border-left:3px solid var(--red); }
  .excerpt-meta { font-family:var(--sans); font-size:13px; color:var(--grey); margin:6px 0 20px 17px; }
  .pills { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
  .btn { display:inline-flex; align-items:center; justify-content:center; height:40px; border-radius:30px; border:1px solid var(--edge);
    background:transparent; color:var(--text); font-family:var(--sans); font-weight:400; font-size:15px; padding:0 13px; white-space:nowrap; cursor:pointer; }
  .btn.primary { background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }
  @media (hover:hover) { .btn:hover, .fab:hover { background:#E61900; color:#fff; border-color:#E61900; } }
  .foot { font-family:var(--sans); font-size:13px; color:var(--grey); margin-top:12px; }
  .close-x { position:absolute; right:14px; top:12px; width:32px; height:32px; border-radius:50%; border:0; background:var(--soft); color:var(--grey); cursor:pointer; padding:0; display:grid; place-items:center; }
  .close-x svg { width:12px; height:12px; }

  .setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--hair); font-family:var(--sans); font-size:15px; }
  .setting small { display:block; color:var(--grey); font-size:13px; margin-top:2px; }
  .set-block { padding:16px 0; border-bottom:1px solid var(--hair); }
  .set-label { font-family:var(--sans); font-weight:500; font-size:14px; color:var(--grey); margin-bottom:10px; }
  .set-label small { display:block; font-weight:400; font-size:13px; margin-top:2px; }
  /* paper switch, as in the website footer: "melbourne time" plus a day/night button */
  .seg { display:inline-flex; border:1px solid var(--edge); border-radius:30px; overflow:hidden; }
  .seg button { font-family:var(--sans); font-weight:400; font-size:14px; line-height:1; background:transparent; color:var(--text); border:0; min-height:40px; padding:0 14px; cursor:pointer; }
  .seg button[aria-pressed="true"] { background:var(--btn-bg); color:var(--btn-fg); }
  .seg .seg-icon { width:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-left:1px solid var(--edge); border-radius:0 30px 30px 0; }
  .seg .seg-icon .i-sun { display:none; }
  .seg .seg-icon.is-dark .i-sun { display:block; }
  .seg .seg-icon.is-dark .i-moon { display:none; }
  /* chips, as on the website: outline pill, solid when ticked, no checkmark */
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { font-family:var(--sans); font-weight:400; font-size:15px; height:40px; padding:0 13px; border-radius:30px; border:1px solid var(--edge); background:transparent; color:var(--text); white-space:nowrap; cursor:pointer; }
  .chip[aria-pressed="true"] { background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }
  @media (hover:hover) { .chip:hover, .seg button:hover { background:#E61900; color:#fff; border-color:#E61900; } }
  .stats { font-family:var(--sans); font-size:15px; line-height:1.7; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:12px 0; margin:16px 0; }
  .help { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--grey); line-height:1.5; }
  .field { width:100%; font-family:var(--serif); font-size:22px; padding:12px 14px; border-radius:4px; border:1px solid var(--edge); background:var(--paper); color:var(--text); margin:6px 0 14px; user-select:text; -webkit-user-select:text; }

  .no-motion * { transition-duration:0s !important; animation-duration:0s !important; animation-delay:0s !important; }
.src-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 4px; background: var(--soft, #F5F5F5); font-family: var(--sans); font-size: 14px; }
.src-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sheet .pills a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* simple pages: landing, welcome, privacy */
body.page { overflow: auto; height: auto; min-height: 100%; }
.page-main { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) 22px 48px; }
.page-mark { display: inline-block; margin-bottom: 28px; }
.page-h1 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 14px; }
.page-h2 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 28px 0 6px; }
.page-main .page-h2.tight { margin-bottom: 0; }
.page-main .page-h2.tight + p { margin-top: 2px; font-size: 18px; color: var(--grey); }
.page-main p.page-lede, .page-lede { font-family: var(--serif); font-size: 22px; line-height: 1.45; margin: 0 0 22px; }
.page-main p { font-family: var(--serif); font-size: 19px; line-height: 1.6; }
.page-main p.page-small, .page-note { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--grey); margin: 14px 0 0; }
.page-list { list-style: none; padding: 0; margin: 0 0 18px; font-family: var(--serif); font-size: 19px; line-height: 1.6; }
.page-list li { border-left: 3px solid var(--red); padding-left: 10px; margin: 0 0 8px; }
.page-main a:not(.btn) { color: inherit; }
.page-main .pills { margin: 22px 0 6px; }
.page-main a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.page-form { margin: 0 0 8px; }
.page-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hair); font-family: var(--serif); font-size: 18px; line-height: 1.45; cursor: pointer; }
.page-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 3px 0 0; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 4px; background: var(--paper) no-repeat center / 14px 14px; cursor: pointer; }
.page-check input:checked { background-color: var(--btn-bg); border-color: var(--btn-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.paper-night .page-check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23231F20' stroke-width='1.6'/%3E%3C/svg%3E"); }
.page-check b { font-weight: 500; }
.page-addr, .addr { font-family: var(--sans); font-size: 15px; background: var(--soft, #F5F5F5); padding: 10px 12px; border-radius: 4px; word-break: break-all; user-select: all; }
.page-main button.btn { font-family: var(--sans); }
.page-main p.page-addr { font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.src-row { display: flex; justify-content: flex-start; align-items: center; gap: 14px; padding: 8px 0; font-family: var(--sans); font-size: 15px; }
.src-row small { display: block; color: var(--grey); font-size: 13px; }
.howto { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--grey); margin: 8px 0 0; padding-left: 18px; }
.howto code { font-size: 13px; background: var(--soft, #F5F5F5); padding: 1px 4px; border-radius: 3px; word-break: break-all; }

/* links in the sheet: brand style, never browser blue */
.sheet a:not(.btn) { color: var(--text); }
.set-links { font-family: var(--sans); font-size: 15px; margin: 14px 0 0; display: flex; gap: 16px; }

/* no underlined links anywhere; ink red on hover where hover exists */
a { text-decoration: none; }
@media (hover:hover) { a:not(.btn):hover { color: var(--red); } }
@media (hover:hover) { .linkish:hover { color: var(--red); } }
.page-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.page-mark .splat { height: 32px; }
/* "today." beside the splat, the same as the app header */
.page-name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--text); }
@media (hover:hover) { .page-mark:hover .page-name { color: var(--red); } }
.task.leaving { opacity:.25; pointer-events:none; }

.src-banner { position: relative; z-index: 4; }

/* the app's name beside the splat: tapping it goes to today */
.brand { display:flex; align-items:center; gap:10px; }
.appname { background:none; border:0; padding:6px 4px; margin:-6px 0; color:var(--text); font-family:var(--serif); font-weight:400; font-size:24px; line-height:1; cursor:pointer; }
@media (hover:hover) { .appname:hover { color:var(--red); } }

/* room between the forwarding address and its buttons */
.addr + .pills { margin-top: 14px; }

/* reorder: an invisible grab strip down the left of each task, over the number */
.task .grip { position:absolute; left:0; top:0; bottom:0; width:58px; touch-action:none; cursor:grab; z-index:1; }
.task.dragging { z-index:5; transition:none; box-shadow:0 8px 24px rgba(0,0,0,.12); cursor:grabbing; }
.task.dragging .grip { cursor:grabbing; }
/* the focus ring only for keyboard use, never after a tap, a click or a sheet opening */
html:not(.kbd) :focus-visible { outline:none; }
/* the round grey close button never takes a red ring: keyboard focus darkens it instead */
.close-x:focus-visible { outline:none; }
html.kbd .close-x:focus-visible { background:var(--hair); color:var(--text); }
@media (hover:hover) { .close-x:hover { background:var(--hair); color:var(--text); } }
/* text fields: the edge darkens on focus, no ring */
.field:focus, .field:focus-visible { outline:none; border-color:var(--text); }

.excerpt-meta.alone { margin-left: 0; }

/* google sources: the on./off. button sits right after the source's name, lined up down the list */
.src-note { display: block; margin: 2px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--grey); }
/* room between the last source and check now. / disconnect google. */
.src-row + .pills { margin-top: 10px; }
.src-note + .pills { margin-top: 10px; }

/* landing: sign in and try it first side by side */
form.pills { flex-wrap: nowrap; }
/* text links on the landing, welcome, privacy and terms pages are underlined (not buttons, not the splat and name) */
.page-main a:not(.btn):not(.page-mark) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* the landing, welcome, privacy and terms pages are reading pages: text can be selected (the app keeps it off for its gestures) */
body.page { user-select: text; -webkit-user-select: text; }