/* WERC APAC BENGALURU, BY AGENTEC. One app, two names on it.
   Phone first at 390, holds at the 320 floor, holds on a laptop at 1440.

   THE LOOK, AND WHERE IT COMES FROM.

   The day happens in a bright ballroom at two in the afternoon, so light is
   the default here and dark is honoured, not the other way round. The cream,
   the navy, the red and the yellow are sampled off WERC's own published
   agenda, so a delegate holding their printed agenda and this phone is
   reading one day and not two. WERC's name is set in type until Kanak sends a
   mark; their logo is never redrawn.

   Amber and copper are Agentec's and they are the only "do this" colour on
   any screen, which is canon rule 22. Navy, red and yellow are identity and
   state and are never an action.

   THE NUMBERS. Type: 32 for the one number on a screen, 20 for a head, 17 for
   anything read as a sentence, 16 on every control, 15 for a label. Targets
   44. Grid of 8. Every pair measured, none eyeballed. Colour is never the only
   carrier of a state: every state word has a mark and a word. Motion: 160 ms
   for a state, 240 for a panel, and everything lands finished under reduced
   motion. */

@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap;
             src:url("fonts/plex/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-display:swap;
             src:url("fonts/plex/IBMPlexMono-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap;
             src:url("fonts/plex/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap;
             src:url("fonts/plex/IBMPlexSans-600.woff2") format("woff2"); }

/* ------------------------------------------------------------- the palette
   The whole light palette is defined here on bare :root. Dark redefines only
   what changes, twice: once for the phone that is set to dark, once for the
   person who taps the key in the head. A colour whose only home is inside a
   media query is a colour that disappears. */

:root{
  color-scheme:light dark;

  --page:#F7F3EA;          /* WERC's cream, the ground of their agenda */
  --card:#FFFFFF;          /* their session cards */
  --sunk:#EEF2F5;          /* the pale blue their times sit in */
  --line:#E3DCCD;
  --line-strong:#CEC4B0;

  --ink:#1F2A37;           /* 13.13 to 1 on the cream */
  --ink-dim:#4A5461;       /* 6.94 to 1 on the cream */
  --ink-mute:#5A6472;      /* 5.42 to 1 on the cream, labels only */

  --navy:#12385C;          /* 10.86 on cream, 12.03 on white */
  --navy-deep:#0C2942;
  --band:#12385C;          /* a filled bar. its own text token below */
  --on-band:#FFFFFF;       /* 12.03 on the navy bar */
  --on-red:#FFFFFF;        /* 3.52 on the red bar, so nothing under 18.66 px goes on it */
  --red:#F44B50;           /* a band fill. never a word under 18.66 px */
  --red-ink:#B3261E;       /* 5.9 on cream, the word "lunch" */
  --yellow:#F9B81C;        /* a band fill. navy on it is 6.82 */
  --yellow-ink:#6A4A00;

  --amber:#FFB253;         /* Agentec. the one action colour */
  --amber-deep:#E89A3A;
  --copper:#A45A28;
  --copper-ink:#8B4A20;    /* 6.12 on cream */
  --on-amber:#161512;      /* 10.21 on the amber */

  --good:#0F6B3D;
  --shadow:0 1px 2px rgba(31,42,55,.07), 0 6px 18px rgba(31,42,55,.06);
  --shadow-lift:0 2px 4px rgba(31,42,55,.09), 0 10px 26px rgba(31,42,55,.09);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;

  --tick:160ms;
  --panel:240ms;
  --ease:cubic-bezier(.2,0,0,1);
  --out:cubic-bezier(.16,1,.3,1);

  --r:14px;                /* cards */
  --r-s:10px;              /* keys and chips */
  --pad:16px;
  --barh:62px;             /* the tab bar, without the safe area */
}

@media (prefers-color-scheme:dark){
  :root:not([data-skin="light"]){
    --page:#0A0906; --card:#12100C; --sunk:#1A1712;
    --line:#26211A; --line-strong:#3A3226;
    --ink:#EFEBE3; --ink-dim:#B7AE9C; --ink-mute:#A29981;
    --navy:#8FC2F0; --navy-deep:#B9D7F6;
    --band:#8FC2F0; --on-band:#161512;   /* 9.69 the other way round */
    --red:#C0272D; --red-ink:#FF9A93; --on-red:#FFFFFF;
    --yellow:#F9B81C; --yellow-ink:#F9B81C;
    --copper:#FFB253; --copper-ink:#FFC680;
    --good:#7CE38B;
    --shadow:0 1px 0 rgba(0,0,0,.5); --shadow-lift:0 2px 0 rgba(0,0,0,.6);
  }
}
:root[data-skin="dark"]{
  --page:#0A0906; --card:#12100C; --sunk:#1A1712;
  --line:#26211A; --line-strong:#3A3226;
  --ink:#EFEBE3; --ink-dim:#B7AE9C; --ink-mute:#A29981;
  --navy:#8FC2F0; --navy-deep:#B9D7F6;
  --band:#8FC2F0; --on-band:#161512;
  --red:#C0272D; --red-ink:#FF9A93; --on-red:#FFFFFF;
  --yellow:#F9B81C; --yellow-ink:#F9B81C;
  --copper:#FFB253; --copper-ink:#FFC680;
  --good:#7CE38B;
  --shadow:0 1px 0 rgba(0,0,0,.5); --shadow-lift:0 2px 0 rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------ base */

*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--page); -webkit-text-size-adjust:100%}
body{background:var(--page); color:var(--ink); font-family:var(--sans);
     font-variant-numeric:tabular-nums slashed-zero; -webkit-font-smoothing:antialiased;
     min-height:100svh; display:flex; flex-direction:column}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0}
button, a, [role="button"], input, textarea, select{touch-action:manipulation}
img{max-width:100%; display:block}
[hidden]{display:none !important}
ol,ul{list-style:none}

:focus-visible{outline:3px solid var(--copper); outline-offset:2px; border-radius:3px}
:root[data-skin="dark"] :focus-visible,
:root:not([data-skin="light"]) :focus-visible{outline-color:var(--amber)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    clip-path:inset(50%); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:9;
      background:var(--amber); color:var(--on-amber); padding:14px 16px;
      font:600 16px/1 var(--sans); text-decoration:none; border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ------------------------------------------------------------------ head */

.head{position:sticky; top:0; z-index:5; background:var(--page);
      border-bottom:1px solid var(--line-strong);
      padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 9px}
.head .top{display:flex; align-items:center; gap:10px; min-height:32px}
.head .werc{display:block; min-width:0}
.head .werc b{display:block; font:600 15px/1.05 var(--sans); letter-spacing:.055em;
              color:var(--navy); white-space:nowrap}
.head .werc small{display:block; margin-top:2px; font:400 15px/1.05 var(--sans);
                  letter-spacing:.01em; color:var(--ink-mute); white-space:nowrap}
.head .rule{flex:none; width:1px; align-self:stretch; background:var(--line-strong)}
.head .by{display:flex; align-items:center; gap:6px; flex:none}
.head .by small{font:400 15px/1 var(--sans); color:var(--ink-mute)}
.head .mark{height:20px; width:auto; flex:none}
.head .mark.dark{display:none}
.head .sub{margin-top:7px; font:400 15px/1.25 var(--mono); color:var(--ink-dim)}

@media (prefers-color-scheme:dark){
  :root:not([data-skin="light"]) .head .mark.light{display:none}
  :root:not([data-skin="light"]) .head .mark.dark{display:block}
}
:root[data-skin="dark"] .head .mark.light{display:none}
:root[data-skin="dark"] .head .mark.dark{display:block}

/* the one key in the chrome: the screen's own light */
.skin{flex:none; margin-left:auto; width:44px; height:44px; margin-right:-10px;
      display:grid; place-items:center; border-radius:var(--r-s)}
.skin .glyph{width:18px; height:18px; border-radius:50%;
             border:2px solid var(--ink-dim);
             background:linear-gradient(90deg,var(--ink-dim) 0 50%,transparent 50%)}
.skin:active{background:var(--sunk)}

/* ------------------------------------------------------------------ main */

main{flex:1; width:100%; padding:0 var(--pad);
     padding-bottom:calc(var(--barh) + env(safe-area-inset-bottom) + 24px)}
.waitline{padding:24px 0; font:400 17px/1.5 var(--sans); color:var(--ink-dim)}

/* ------------------------------------------------------------- the tabs */

.tabs{position:fixed; left:0; right:0; bottom:0; z-index:6;
      display:grid; grid-template-columns:repeat(5,1fr);
      background:var(--card); border-top:1px solid var(--line-strong);
      padding-bottom:env(safe-area-inset-bottom);
      box-shadow:0 -2px 14px rgba(31,42,55,.06)}
.tab{display:flex; flex-direction:column; align-items:center; justify-content:center;
     gap:3px; min-height:var(--barh); padding:6px 2px 8px; text-decoration:none;
     color:var(--ink-mute); font:400 16px/1 var(--sans); position:relative}
.tab span{white-space:nowrap; font-size:16px}
.tab .ic{width:22px; height:22px; display:block; flex:none;
         background:currentColor;
         -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
         -webkit-mask-position:center; mask-position:center;
         -webkit-mask-size:contain; mask-size:contain}
.ic-today{-webkit-mask-image:var(--m-today); mask-image:var(--m-today)}
.ic-day{-webkit-mask-image:var(--m-day); mask-image:var(--m-day)}
.ic-recaps{-webkit-mask-image:var(--m-recaps); mask-image:var(--m-recaps)}
.ic-mine{-webkit-mask-image:var(--m-mine); mask-image:var(--m-mine)}
.ic-more{-webkit-mask-image:var(--m-more); mask-image:var(--m-more)}
/* THE MARK IS A SHAPE, NOT A COLOUR. The tab you are on carries a filled rule
   above it and its word goes to 600, so the state survives a colourblind eye
   and a bleached screen in a bright hall. */
.tab[aria-current="page"]{color:var(--navy); font-weight:600}
.tab[aria-current="page"]::before{content:""; position:absolute; top:0; left:16%; right:16%;
      height:3px; background:var(--copper); border-radius:0 0 3px 3px}
.tab:active{background:var(--sunk)}

:root{
  --m-today:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2.4a7.6 7.6 0 1 1 0 15.2 7.6 7.6 0 0 1 0-15.2Zm-1.1 2.5v5.9l4.6 2.8 1.1-1.9-3.5-2.1V6.9Z'/%3E%3C/svg%3E");
  --m-day:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 4.5h4v3H3v-3Zm6 .4h12v2.2H9V4.9ZM3 10.5h4v3H3v-3Zm6 .4h12v2.2H9v-2.2ZM3 16.5h4v3H3v-3Zm6 .4h12v2.2H9v-2.2Z'/%3E%3C/svg%3E");
  --m-recaps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h11l3.5 3.5V21H5V3Zm2 2v14h10.5V8H15V5H7Zm2 4h4v2H9V9Zm0 4h7v2H9v-2Zm0 4h7v2H9v-2Z'/%3E%3C/svg%3E");
  --m-mine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3Z'/%3E%3C/svg%3E");
  --m-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 9.7a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6Zm7 0a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6Zm7 0a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- section and card */

.sect{margin-top:26px}
.sect:first-child{margin-top:18px}
.kicker{font:600 15px/1.1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
        color:var(--ink-mute)}
h1{font:600 26px/1.15 var(--sans); letter-spacing:-.015em; color:var(--navy)}
h2{margin-top:6px; font:600 20px/1.2 var(--sans); letter-spacing:-.01em; color:var(--navy)}
h3{font:600 17px/1.3 var(--sans); color:var(--ink)}
h4{font:600 17px/1.3 var(--sans); color:var(--ink)}
p{font:400 17px/1.5 var(--sans); color:var(--ink); max-width:66ch}
p + p{margin-top:10px}
.dim{color:var(--ink-dim)}
.small{font:400 15px/1.45 var(--sans); color:var(--ink-dim); max-width:66ch}

.card{margin-top:12px; background:var(--card); border:1px solid var(--line);
      border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
.card h3{color:var(--navy)}
.card > p{margin-top:8px}

/* ------------------------------------------------------------- the state */

.chip{display:inline-flex; align-items:center; gap:7px; max-width:100%;
      font:600 15px/1.1 var(--mono); letter-spacing:.03em; white-space:nowrap}
.chip i{display:block; width:11px; height:11px; flex:none; border-radius:2px;
        border:2px solid currentColor}
.chip.on{color:var(--copper-ink)}
.chip.on i{background:currentColor; box-shadow:0 0 0 3px rgba(164,90,40,.2)}
.chip.up{color:var(--good)} .chip.up i{background:currentColor}
.chip.wait{color:var(--ink-mute)} .chip.wait i{border-style:dashed}
.chip.none{color:var(--ink-mute)}
.chip.break{color:var(--yellow-ink)}
.chip.break i{background:linear-gradient(180deg,transparent 0 50%,currentColor 50%)}
.chip.lunch{color:var(--red-ink)}
.chip.lunch i{background:linear-gradient(90deg,currentColor 0 50%,transparent 50%)}

/* -------------------------------------------------------------- the keys */

.keys{display:grid; gap:10px; margin-top:14px}
.key{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 14px;
     border-radius:var(--r-s); text-decoration:none; text-align:left;
     font:600 16px/1.25 var(--sans); color:var(--ink);
     background:var(--card); border:1px solid var(--line-strong);
     box-shadow:var(--shadow); width:100%;
     transition:transform var(--tick) var(--ease), box-shadow var(--tick) var(--ease)}
.key > span{flex:1; min-width:0}
.key small{display:block; margin-top:3px; font:400 15px/1.35 var(--sans); color:var(--ink-dim)}
.key .arm{flex:none; width:9px; height:9px; border-right:2px solid var(--copper);
          border-top:2px solid var(--copper); transform:rotate(45deg)}
.key:active{transform:translateY(1px); box-shadow:none}
.key.go{background:var(--amber); border-color:var(--amber-deep); color:var(--on-amber)}
.key.go small{color:rgba(22,21,18,.78)}
.key.go .arm{border-color:var(--on-amber)}
.key.wide{min-height:64px}
.key.flat{box-shadow:none; background:transparent}
.key[aria-disabled="true"]{opacity:1; background:var(--sunk); border-style:dashed;
                           box-shadow:none; color:var(--ink-dim)}

/* --------------------------------------------------------------- the day */

/* THE TIME IS THE BIGGEST THING IN A ROW. A person standing at the back of a
   ballroom at 11:40 finds where they are by the number, never by the title. */
.day{margin-top:12px; display:grid; gap:8px}
.rowwrap{position:relative}
/* the star sits in the same corner of every row, outside the link, so a whole
   row stays one tap and no control is ever inside another */
.rowwrap .star{position:absolute; top:8px; right:8px; margin:0}
.row.starred{padding-right:54px}
.row{display:grid; grid-template-columns:72px 1fr; column-gap:12px; align-items:start;
     background:var(--card); border:1px solid var(--line); border-radius:var(--r);
     padding:13px 14px; min-height:44px; text-decoration:none; color:var(--ink);
     box-shadow:var(--shadow)}
.row .clock{display:block}
.row .clock b{display:block; font:600 24px/1 var(--mono); letter-spacing:-.02em; color:var(--navy)}
/* the end time under the start with a short rule between them. "to 11:45" is
   eight characters of mono and it wrapped onto its own line at the 320 floor,
   which turned a running sheet into a stack of broken numbers. */
.row .clock span{display:flex; align-items:center; gap:5px; margin-top:6px;
                 font:400 15px/1 var(--mono); color:var(--ink-mute)}
.row .clock span i{display:block; width:9px; height:2px; flex:none; background:var(--line-strong)}
.row .what{min-width:0}
.row h3{font:600 17px/1.32 var(--sans)}
.row .sub{margin-top:5px; font:400 15px/1.4 var(--sans); color:var(--ink-dim)}
.row .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px}
.row .who{font:400 15px/1.2 var(--mono); color:var(--ink-mute)}
.row .go2{margin-left:auto; font:600 15px/1 var(--sans); color:var(--copper-ink); white-space:nowrap}
.row a.go2{display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
           margin:-8px -10px -8px auto; font-size:16px; text-decoration:none}
@media (hover:hover){ .row.open:hover{box-shadow:var(--shadow-lift)} }
.row.open:active{background:var(--sunk)}

/* a break is WERC's own yellow band, lunch is their red one, exactly as their
   agenda draws them. The band is a rule down the side, never a colour behind
   a word: yellow behind 15 px type measures 1.4 to 1. */
.row.break{background:var(--sunk); box-shadow:none; border-left:4px solid var(--yellow)}
.row.break .clock b{color:var(--ink-dim); font-size:20px}
.row.break h3{font-weight:400; color:var(--ink-dim)}
.row.lunch{border-left-color:var(--red)}

/* the session you are in */
.row.now{border-color:var(--copper); border-left:4px solid var(--copper);
         background:var(--card); box-shadow:var(--shadow-lift)}
.row.now .clock b{color:var(--copper-ink)}

.roomkey{display:block; margin-top:12px}

@media (max-width:359px){
  .row{grid-template-columns:62px 1fr; column-gap:9px; padding:12px}
  .row.starred{padding-right:50px}
  .row .clock b{font-size:21px}
  .rowwrap .star{top:6px; right:5px}
}

/* ------------------------------------------------------------- the stars */

.star{flex:none; width:44px; height:44px; margin:-8px -8px -8px 0;
      display:grid; place-items:center; border-radius:var(--r-s)}
.star .s{width:20px; height:20px; background:var(--ink-mute);
         -webkit-mask-image:var(--m-mine); mask-image:var(--m-mine);
         -webkit-mask-size:contain; mask-size:contain;
         -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
         -webkit-mask-position:center; mask-position:center}
.star[aria-pressed="true"] .s{background:var(--copper)}
.star:active{background:var(--sunk)}

/* ---------------------------------------------------------- today, on top */

.nowcard{margin-top:16px; background:var(--card); border:1px solid var(--line-strong);
         border-radius:var(--r); box-shadow:var(--shadow-lift); overflow:hidden}
.nowcard .band{display:flex; align-items:center; gap:10px; padding:11px 14px;
               background:var(--band); color:var(--on-band)}
.nowcard .band .t{font:600 16px/1 var(--mono); letter-spacing:.04em}
.nowcard .band .c{margin-left:auto; font:400 16px/1 var(--mono); opacity:.92}
.nowcard .body{padding:16px 14px 16px}
.nowcard .huge{font:600 32px/1 var(--mono); letter-spacing:-.02em; color:var(--copper-ink)}
.nowcard h2{margin-top:8px; font-size:20px; color:var(--ink)}
.nowcard .where{margin-top:9px; font:400 15px/1.3 var(--mono); color:var(--ink-dim)}
.nowcard .keys{margin-top:14px}
.nextline{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
          display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline}
.nextline .l{font:600 15px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase;
             color:var(--ink-mute)}
.nextline .v{font:600 17px/1.35 var(--sans); color:var(--ink)}
.nextline .w{grid-column:2; font:400 15px/1.3 var(--mono); color:var(--ink-dim)}

/* the line that changes through the day */
.saying{margin-top:12px; display:flex; align-items:flex-start; gap:10px;
        padding:12px 14px; background:var(--sunk); border-radius:var(--r-s);
        border-left:4px solid var(--copper)}
.saying p{font:400 17px/1.45 var(--sans); color:var(--ink)}

/* the theme band, WERC's own red, exactly as it closes their agenda */
.theme{margin-top:26px; border-radius:var(--r); overflow:hidden;
       background:var(--red); padding:16px 16px 17px; text-align:center}
.theme b{display:block; font:600 20px/1.25 var(--sans); color:var(--on-red); letter-spacing:.01em}
.themesub{margin-top:8px; font:400 15px/1.4 var(--sans); color:var(--ink-dim); text-align:center}

/* --------------------------------------------------------- freshness line */

.fresh{margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
       display:flex; align-items:flex-start; gap:9px}
.fresh i{display:block; width:11px; height:11px; margin-top:5px; flex:none; border-radius:2px;
         border:2px solid var(--ink-mute)}
.fresh.saved i{background:var(--ink-mute)}
.fresh.broken i{border-color:var(--red-ink); background:var(--red-ink)}
.fresh p{font:400 15px/1.45 var(--sans); color:var(--ink-dim)}

/* ------------------------------------------------------------- the 30 days */

.clock30{margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
.clock30 .line{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.clock30 .n{font:600 26px/1 var(--mono); color:var(--ink)}
.clock30 .w{font:400 15px/1.4 var(--sans); color:var(--ink-dim)}
.blocks{display:flex; gap:3px; margin-top:10px; flex-wrap:wrap}
.blocks i{display:block; width:9px; height:16px; background:var(--line-strong); border-radius:1px}
.blocks i.spent{background:var(--copper)}

/* ------------------------------------------------------------- a session */

.back{display:inline-flex; align-items:center; gap:8px; min-height:44px;
      padding:0 12px 0 4px; margin:8px 0 0 -4px;
      font:400 16px/1 var(--sans); color:var(--ink-dim); text-decoration:none}
.back b{display:inline-block; width:9px; height:9px; border-left:2px solid currentColor;
        border-bottom:2px solid currentColor; transform:rotate(45deg)}

.when{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:4px}
.when .big{font:600 32px/1 var(--mono); letter-spacing:-.02em; color:var(--navy)}
.when .to{font:400 17px/1.2 var(--mono); color:var(--ink-dim)}
.speakers{margin-top:14px; display:grid; gap:10px}
.speaker{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center}
.speaker .av{width:38px; height:38px; border-radius:50%; background:var(--sunk);
             border:1px solid var(--line-strong); display:grid; place-items:center;
             font:600 15px/1 var(--mono); color:var(--navy)}
.speaker b{display:block; font:600 17px/1.3 var(--sans)}
.speaker span{display:block; margin-top:2px; font:400 15px/1.35 var(--sans); color:var(--ink-dim)}

/* --------------------------------------------------------------- feedback */

.faces{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.face{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
      min-height:88px; padding:12px 6px; border-radius:var(--r-s);
      background:var(--card); border:1px solid var(--line-strong);
      font:600 16px/1.2 var(--sans); color:var(--ink); text-align:center}
.face .f{width:30px; height:30px; border-radius:50%; border:2px solid var(--ink-dim);
         position:relative}
/* the eyes */
.face .f::after{content:""; position:absolute; left:7px; right:7px; top:9px; height:3px;
                border-left:3px solid var(--ink-dim); border-right:3px solid var(--ink-dim)}
/* the mouth. an arc for worth it, a straight rule for all right, the arc the
   other way up for not for me */
.face .f::before{content:""; position:absolute; left:7px; right:7px; top:17px; height:2px;
                 background:var(--ink-dim); border-radius:1px}
.face.good .f::before{top:14px; height:8px; background:none; border-radius:0 0 12px 12px;
                      border:2px solid transparent; border-bottom-color:var(--ink-dim)}
.face.poor .f::before{top:16px; height:8px; background:none; border-radius:12px 12px 0 0;
                      border:2px solid transparent; border-top-color:var(--ink-dim)}
.face[aria-pressed="true"]{background:var(--amber); border-color:var(--amber-deep);
                           color:var(--on-amber)}
.face[aria-pressed="true"] .f{border-color:var(--on-amber)}
.face[aria-pressed="true"] .f::before{background:var(--on-amber)}
.face[aria-pressed="true"] .f::after{border-color:var(--on-amber)}
.face.good[aria-pressed="true"] .f::before{background:none; border-color:transparent;
                                           border-bottom-color:var(--on-amber)}
.face.poor[aria-pressed="true"] .f::before{background:none; border-color:transparent;
                                           border-top-color:var(--on-amber)}
.face:active{transform:translateY(1px)}

.line{margin-top:12px}
.line textarea{width:100%; min-height:88px; padding:12px; border-radius:var(--r-s);
               border:1px solid var(--line-strong); background:var(--card); color:var(--ink);
               font:400 16px/1.45 var(--sans); resize:vertical}
.line textarea::placeholder{color:var(--ink-mute)}
.said{margin-top:12px; display:flex; align-items:flex-start; gap:9px;
      padding:12px 14px; border-radius:var(--r-s); background:var(--sunk);
      border-left:4px solid var(--good)}
.said.bad{border-left-color:var(--red-ink)}
.said p{font:400 15px/1.45 var(--sans); color:var(--ink)}

/* one starred session: the row, the note and the calendar file in one card */
.mineone{padding:14px 14px 16px}
.mineone .rowwrap .row{border:0; box-shadow:none; background:none; padding:0 0 12px;
                       border-bottom:1px solid var(--line); border-radius:0}
.mineone .rowwrap .row.starred{padding-right:44px}
.mineone .rowwrap .star{top:-6px; right:-6px}
.mineone .keys{margin-top:12px}

/* ------------------------------------------------------------------ notes */

.note{margin-top:10px}
.note textarea{width:100%; min-height:72px; padding:12px; border-radius:var(--r-s);
               border:1px solid var(--line-strong); background:var(--card); color:var(--ink);
               font:400 16px/1.45 var(--sans); resize:vertical}
.note textarea::placeholder{color:var(--ink-mute)}
.saved{margin-top:7px; font:400 15px/1.3 var(--sans); color:var(--ink-dim)}

/* ------------------------------------------------------------- the recaps */

.recap{margin-top:14px; background:var(--card); border:1px solid var(--line);
       border-radius:var(--r); box-shadow:var(--shadow); padding:18px 16px 20px;
       position:relative}
.recap .stamp{display:inline-block; margin-bottom:10px; padding:4px 9px; border-radius:6px;
              border:2px solid var(--copper); color:var(--copper-ink);
              font:600 15px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.recap h2{margin-top:4px; font-size:20px; color:var(--ink)}
.recap .kick{margin-top:9px; font:400 17px/1.5 var(--sans); color:var(--ink)}
.sampleline{margin-top:12px; padding:11px 13px; border-radius:var(--r-s);
            background:var(--sunk); border-left:4px solid var(--copper);
            font:400 15px/1.45 var(--sans); color:var(--ink)}
.entry{margin-top:18px; padding-top:15px; border-top:1px solid var(--line)}
.entry p{margin-top:6px}
.plate{margin-top:16px}
.plate img{width:100%; height:auto; border-radius:var(--r-s); border:1px solid var(--line-strong)}
.plate figcaption{margin-top:8px; font:400 15px/1.4 var(--sans); color:var(--ink-dim)}
.saidlist{margin-top:12px; display:grid; gap:10px}
.saidlist li{padding:11px 13px; border-radius:var(--r-s); background:var(--sunk);
             border-left:4px solid var(--navy); font:400 17px/1.45 var(--sans); color:var(--ink)}
.saidlist li b{display:block; margin-top:6px; font:400 15px/1 var(--mono); color:var(--ink-mute)}
.rows{margin-top:14px; display:grid; grid-template-columns:minmax(0,max-content) 1fr max-content;
      column-gap:10px; row-gap:10px; align-items:baseline;
      font:400 15px/1.45 var(--mono); color:var(--ink)}
.rows .l{color:var(--ink-dim); overflow-wrap:anywhere}
.rows .d{align-self:end; margin-bottom:.42em; border-bottom:1px dotted var(--ink-mute); opacity:.8}
.rows .v{text-align:right; font-weight:600; white-space:nowrap}
.bars{margin-top:12px; display:grid; grid-template-columns:max-content 1fr max-content;
      column-gap:10px; row-gap:10px; align-items:center}
.bars .bl{font:400 15px/1.2 var(--mono); color:var(--ink-dim)}
.bars .bb{height:14px; border-radius:3px; background:var(--sunk); border:1px solid var(--line-strong)}
.bars .bb i{display:block; height:100%; background:var(--copper); border-radius:2px}
.bars .bn{font:600 17px/1 var(--mono); color:var(--ink); text-align:right}
.take{margin-top:18px; padding-top:15px; border-top:1px solid var(--line)}
.take h4{font:600 15px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
         color:var(--ink-mute)}
.take ol{margin-top:11px; counter-reset:t; display:grid; gap:9px}
.take li{counter-increment:t; display:grid; grid-template-columns:26px 1fr; gap:10px;
         font:400 17px/1.45 var(--sans); color:var(--ink)}
.take li::before{content:counter(t); font:600 15px/1.5 var(--mono); color:var(--copper-ink)}
.prov{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
      font:400 15px/1.45 var(--sans); color:var(--ink-dim)}

/* ---------------------------------------------------------------- install */

.steps{margin-top:12px; display:grid; gap:11px; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:12px;
          align-items:start; font:400 17px/1.4 var(--sans); color:var(--ink)}
.steps li::before{content:counter(s); width:26px; height:26px; border-radius:50%;
                  background:var(--band); color:var(--on-band); display:grid; place-items:center;
                  font:600 15px/1 var(--mono)}

.banner{position:fixed; left:10px; right:10px; z-index:7;
        bottom:calc(var(--barh) + env(safe-area-inset-bottom) + 10px);
        display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px;
        background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r);
        box-shadow:var(--shadow-lift);
        animation:rise var(--panel) var(--out) both}
.banner .t{flex:1; min-width:0; font:600 16px/1.3 var(--sans); color:var(--ink)}
.banner .t small{display:block; margin-top:2px; font:400 15px/1.3 var(--sans); color:var(--ink-dim)}
.banner .yes{min-height:44px; padding:0 14px; border-radius:var(--r-s);
             background:var(--amber); color:var(--on-amber); font:600 16px/1 var(--sans)}
.banner .no{min-width:44px; min-height:44px; padding:0 10px; font:400 16px/1 var(--sans);
            color:var(--ink-dim)}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ------------------------------------------------------------- the wifi */

.wifi{margin-top:12px; display:grid; gap:10px}
.pair{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline;
      padding:12px 14px; background:var(--sunk); border-radius:var(--r-s)}
.pair .l{font:600 15px/1.2 var(--mono); letter-spacing:.07em; text-transform:uppercase;
         color:var(--ink-mute)}
.pair .v{font:600 17px/1.3 var(--mono); color:var(--ink); overflow-wrap:anywhere}

/* -------------------------------------------------------------- the gate */

.gate{padding:18px 0 40px}
.gate h1{font-size:26px}
.gate .said2{margin-top:11px; font:400 17px/1.5 var(--sans); color:var(--ink-dim); max-width:60ch}
.prompt{margin-top:20px; display:flex; align-items:center; gap:10px;
        border:1px solid var(--line-strong); border-radius:var(--r-s); background:var(--card);
        padding:0 6px 0 14px}
.prompt input{flex:1; min-width:0; min-height:56px; background:none; border:0; outline:none;
              font:400 16px/1 var(--mono); color:var(--ink); letter-spacing:.06em}
.prompt input::placeholder{color:var(--ink-mute); letter-spacing:0}
.prompt .in{flex:none; min-height:44px; padding:0 14px; border-radius:8px;
            background:var(--amber); color:var(--on-amber); font:600 16px/1 var(--sans)}
.gate .no2{margin-top:11px; font:400 15px/1.45 var(--sans); color:var(--red-ink)}
.gate .plain{margin-top:16px; font:400 15px/1.5 var(--sans); color:var(--ink-dim); max-width:56ch}
.inside{margin-top:24px; padding-top:16px; border-top:1px solid var(--line)}
.inside ul{margin-top:12px; display:grid; gap:11px}
.inside li{display:grid; grid-template-columns:14px 1fr; column-gap:11px; align-items:start;
           font:400 17px/1.4 var(--sans); color:var(--ink)}
.inside li i{display:block; width:11px; height:11px; margin-top:6px; border-radius:2px;
             background:var(--copper)}

/* -------------------------------------------------------------- the code */

.codeplate{margin-top:14px; display:grid; justify-items:center; padding:20px 16px 22px;
           background:#FFFFFF; border:1px solid var(--line-strong); border-radius:var(--r)}
.codeplate svg{width:min(72vw,300px); height:auto; display:block}
.codeplate .addr{margin-top:14px; font:600 16px/1.35 var(--mono); color:#1F2A37;
                 text-align:center; word-break:break-all}

/* -------------------------------------------------------------- the empty */

.empty{margin-top:14px; padding:22px 16px; text-align:center;
       background:var(--sunk); border:1px dashed var(--line-strong); border-radius:var(--r)}
.empty p{font:400 17px/1.45 var(--sans); color:var(--ink-dim); margin:0 auto}

/* --------------------------------------------------------------- laptop */

@media (min-width:760px){
  :root{--pad:32px}
  main{max-width:760px; margin:0 auto; padding-bottom:112px}
  .head .top, .head .sub{max-width:760px; margin-left:auto; margin-right:auto}
  .head .sub{margin-top:7px}
  .tabs{left:50%; right:auto; transform:translateX(-50%); bottom:20px;
        width:min(680px,calc(100% - 64px)); grid-template-columns:repeat(5,1fr);
        border:1px solid var(--line-strong); border-radius:var(--r);
        box-shadow:var(--shadow-lift); padding-bottom:0; overflow:hidden}
  .tab{flex-direction:row; gap:9px; min-height:56px}
  .tab[aria-current="page"]::before{left:10%; right:10%}
  .banner{left:auto; right:32px; bottom:32px; width:380px}
  .day{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:72px 1fr}
  .faces{grid-template-columns:repeat(3,1fr)}
}

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