/* =========================================================================
   look.css -- how the words look, chosen by the person reading them.

   LOADED LAST, after phone.css. That is on purpose and it is the whole
   trick: this is a person's own choice about their own eyes, so it has to
   beat every other rule in the building. Same weight, later file, wins.

   THREE CHOICES AND NO MORE.

     Letters   what the words are set in
     Size      how big
     Paper     what they are sitting on

   There is no line-height control, no margin control, no justification
   control. Line spacing rides along with size, because looser lines are
   what a bigger size actually wants and nobody should have to know that.
   A settings page with nine sliders is a settings page nobody finishes.
   ========================================================================= */

:root{
  --read-face: var(--serif);
  --read-size: 18px;
  --read-lead: 1.82;

  /* the sheet, as two stops, so a paper choice can swap both */
  --sheet-1: rgba(255,252,244,.97);
  --sheet-2: rgba(246,238,222,.96);
}

/* ---------------------------------------------------------- the letters --

   All four are faces that are ALREADY on the device. Nothing is fetched.
   A web font is a download before the first word appears, and on a phone
   on bad signal that is a blank page where a book should be -- which is
   the exact opposite of what a reading setting is for.
*/

html[data-font="book"] { --read-face: var(--serif); }

/* rounder, warmer, wider -- the face most story books are set in */
html[data-font="story"]{
  --read-face: Georgia, Charter, 'Bitstream Charter', 'Iowan Old Style', serif;
}

/* no serifs at all. Some people simply read this faster, and some kinds
   of dyslexia get on with it much better. */
html[data-font="plain"]{ --read-face: var(--sans); }

/* every letter the same width, like a manuscript out of a typewriter.
   Writers who draft in this swear by it -- it stops the page looking
   finished, so you keep changing it. */
html[data-font="type"] {
  --read-face: 'Courier New', Courier, ui-monospace, 'SF Mono', Consolas, monospace;
}

/* ------------------------------------------------------------- the size --

   Four steps, not a slider. A slider invites fiddling and lands you
   somewhere you did not choose; four steps you just tap until it is right.
*/

html[data-size="s"] { --read-size:16px;   --read-lead:1.74; }
html[data-size="m"] { --read-size:18px;   --read-lead:1.82; }
html[data-size="l"] { --read-size:20.5px; --read-lead:1.86; }
html[data-size="xl"]{ --read-size:23.5px; --read-lead:1.92; }

/* ------------------------------------------------------------ the paper --

   --ink-rgb is the trick that makes this possible at all.
   Forty-three separate rules across desk.css and share.css had the ink
   colour written into them as rgba(37,29,20, something) -- every hairline,
   every border, every faint wash. All of them are now rgba(var(--ink-rgb),
   the same something), so ONE line here turns the whole room over instead
   of forty-three lines missing three of them and leaving dark grey borders
   floating on a dark page.
*/

html[data-paper="soft"]{
  --paper-ink:#3b3024;
  --paper-dim:#7e6e58;
  --ink-rgb:59,48,36;
  --sheet-1:rgba(248,237,215,.98);
  --sheet-2:rgba(238,224,196,.97);
}

html[data-paper="night"]{
  --paper-ink:#e7ddc7;
  --paper-dim:#9d8f79;
  --ink-rgb:231,221,199;
  --sheet-1:#181209;
  --sheet-2:#110d07;
}

/* --------------------------------------------------------------- apply ---

   Only three places, because only three places are actually WORDS: the
   page you write on, the page you read, and the paper a book falls open
   onto. Everything else in the shop is furniture and keeps its own look.
*/

.sheet{
  background:linear-gradient(180deg, var(--sheet-1), var(--sheet-2));
}

.sheet__body,          /* the page you are writing */
.rbody{                /* the page you are reading */
  font-family:var(--read-face);
  font-size:var(--read-size);
  line-height:var(--read-lead);
}

/* Headings follow the letters but keep their own scale -- a chapter name
   set at reading size stops looking like a chapter name. */
.sheet__title,
.rchap,
.rpage{ font-family:var(--read-face); }

.rchap{ font-size:calc(var(--read-size) * 1.28); color:var(--paper-ink);
        line-height:1.25; margin:42px 0 6px; font-weight:600; }
.rpage{ font-size:calc(var(--read-size) * .89); color:var(--paper-dim);
        font-weight:600; margin:26px 0 4px; }
.rbody{ color:var(--paper-ink); white-space:pre-wrap; }

/* the book that opens onto it falls open on the same paper */
.opening__page{
  background:radial-gradient(122% 92% at 46% 34%,
      var(--sheet-1), var(--sheet-2) 62%, var(--sheet-2));
}
html[data-paper="night"] .opening__lamp{ opacity:.35; }
html[data-paper="night"] .opening__grain{ mix-blend-mode:screen; opacity:.03; }

/* ========================================================== the chooser ===

   It shows you the choice INSTEAD OF NAMING IT. Every button is set in
   the thing it will do -- the "Story" button is in Story, the big size is
   big, the night paper is dark with light letters on it. You pick by
   looking, which is the only honest way to pick how something looks.
   ========================================================================= */

/*
 * IT HAS TO BE SOMEWHERE YOU CAN REACH IT.
 *
 * This had no position of its own. On the writing desk that was fine --
 * it sits inside the save bar and the bar places it. On the READING page
 * it is a bare child of <body>, and that page is body.desk, which is
 * overflow:hidden with a full-height scroller inside it. So the button
 * landed at y935 on a 935px screen, in a document that cannot scroll,
 * and the whole letters-and-paper feature was unreachable on the one
 * page it was built for. It was not below the fold. There was no fold.
 *
 * So it is pinned, like the contents pill it sits beside.
 */
.aa{
  position:fixed; z-index:41;
  left:calc(env(safe-area-inset-left, 0px) + 14px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; min-height:46px; padding:0 12px;
  border:1px solid rgba(var(--ink-rgb), .16);
  border-radius:24px;
  /* the sheet token, not a fixed cream -- on night paper a hard-coded
     cream made this the one bright thing on an otherwise dark screen,
     which is exactly what somebody choosing night paper is getting away
     from */
  background:var(--sheet-1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--paper-ink);
  font-family:var(--serif); font-size:16px; line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.aa:hover,.aa:focus-visible{ border-color:rgba(var(--ink-rgb), .34); }
.aa b{ font-size:19px; font-weight:600; }
.aa i{ font-style:normal; font-size:13px; opacity:.7; margin-left:1px; }

/* on the writing desk it lives in the dark bar at the bottom, so there it
   is not a pinned pale pill -- it is one of the bar's own buttons, and the
   bar does the placing */
.bar .aa{
  position:static;
  gap:7px;
  background:none; border:0; border-radius:3px;
  color:var(--cream-dim);
  min-width:44px; min-height:44px; padding:0 10px;
}
.bar .aa:hover{ color:var(--gold); }

/* the word sits in the bar's own type, not the reading serif */
.bar .aa .bar__word{
  font-family:var(--sans); font-size:12px; letter-spacing:.06em;
}

/*
 * On a narrow screen the contents pill is centred along the bottom and is
 * very nearly the full width of it -- at 375px it runs from x22 to x352,
 * so a button pinned at x14 would be underneath it. The letters take the
 * line above instead. Measured, so the two cannot meet: the pill occupies
 * the bottom 60px, this sits from 68px up.
 */
@media (max-width:560px){
  .aa{ bottom:calc(env(safe-area-inset-bottom, 0px) + 68px); }
}

.look{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:rgba(10,7,4,.52);
}
.look[hidden]{ display:none; }

.look__card{
  width:min(430px, 100%);
  max-height:min(76svh, 620px);
  overflow-y:auto;
  padding:16px 16px 12px;
  background:linear-gradient(180deg, var(--sheet-1), var(--sheet-2));
  border:1px solid rgba(var(--ink-rgb), .18);
  border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  animation:look-up .3s cubic-bezier(.2,.75,.25,1);
}
@keyframes look-up{ from{ transform:translateY(14px); opacity:0 } }

.look__head{
  margin:2px 0 7px 4px;
  font-family:var(--sans); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper-dim);
}
.look__head + .look__row{ margin-bottom:16px; }

.look__row{ display:flex; gap:8px; }

.look__pick{
  flex:1 1 0; min-width:0;
  min-height:56px; padding:8px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:1px solid rgba(var(--ink-rgb), .16);
  border-radius:6px;
  background:rgba(var(--ink-rgb), .03);
  color:var(--paper-ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  overflow:hidden;
}
.look__pick:hover,.look__pick:focus-visible{ border-color:rgba(var(--ink-rgb), .4); }

/* the one you are on, marked the way a finger marks a page */
.look__pick.is-on{
  border-color:rgba(184,147,79,.9);
  background:rgba(184,147,79,.16);
  box-shadow:inset 0 0 0 1px rgba(184,147,79,.4);
}

/* the big letters in each button are set in what the button DOES */
.look__pick em{ font-style:normal; font-size:21px; line-height:1.1; }
.look__pick span{
  font-family:var(--sans); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* letters: each shown in its own face */
.look__pick[data-v="book"]  em{ font-family:var(--serif); }
.look__pick[data-v="story"] em{ font-family:Georgia, Charter, serif; }
.look__pick[data-v="plain"] em{ font-family:var(--sans); }
.look__pick[data-v="type"]  em{ font-family:'Courier New', Courier, monospace; }

/* size: each shown at its own size */
.look__pick[data-v="s"]  em{ font-size:14px; }
.look__pick[data-v="m"]  em{ font-size:18px; }
.look__pick[data-v="l"]  em{ font-size:23px; }
.look__pick[data-v="xl"] em{ font-size:28px; }

/* paper: each shown ON its own paper */
.look__pick[data-v="paper"]{ background:linear-gradient(180deg,#fffcf4,#f6eede); color:#251d14; }
.look__pick[data-v="soft"] { background:linear-gradient(180deg,#f8edd7,#eee0c4); color:#3b3024; }
.look__pick[data-v="night"]{ background:linear-gradient(180deg,#181209,#110d07); color:#e7ddc7; }
.look__pick[data-v="paper"] span,
.look__pick[data-v="soft"]  span{ color:rgba(37,29,20,.55); }
.look__pick[data-v="night"] span{ color:rgba(231,221,199,.55); }

.look__shut{ width:100%; margin-top:4px; }

.look__why{
  margin:12px 4px 2px;
  font-family:var(--sans); font-size:11.5px; line-height:1.5;
  color:var(--paper-dim);
}

@media (prefers-reduced-motion: reduce){
  .look__card{ animation:none; }
}

/* the two green lines on a shared page: dark green on paper, light on the night paper */
html[data-paper="night"] .said__helped,
html[data-paper="night"] .cpage__said{ color:#9ccf7e; }