/* =========================================================================
   phone.css -- ALWAYS LOADED LAST, on every page.

   That is the whole trick. These rules were in base.css, which loads
   first, so every page's own stylesheet quietly overruled them and the
   text stayed at 9.5px on a phone. Last file wins, so this one is last.
   ========================================================================= */

@media (max-width:760px){

  body{ font-size:17px; }

  .tiny{ font-size:12px; letter-spacing:.12em; }
  .note{ font-size:15.5px; line-height:1.65; }

  /* the small grey lines that label things */
  .sheet__where,
  .doorstep__by,
  .notes__head,
  .talk__head,
  .unit__head h2,
  .rail__back,
  .part__head,
  .addline{ font-size:12px; letter-spacing:.16em; }

  .unit__count,
  .notes__n,
  .talk__n,
  .leaf__n{ font-size:11.5px; }

  /* notes and comments are things you READ, so they get read-sized */
  .anote__line,
  .said__who,
  .hit__bit,
  .sayso,
  .tags__say{ font-size:13px; line-height:1.6; }

  .anote__tags span,
  .said__tag,
  .hit__kind{ font-size:11px; letter-spacing:.08em; padding:3px 8px; }

  .chip{ font-size:12.5px; min-height:36px; padding:7px 12px; }

  /* anything you tap is a proper size for a thumb */
  .btn{ min-height:44px; padding:.7em 1.2em; font-size:16px; }
  .bar__btn{ min-height:44px; }
  .rail__back{ min-height:44px; align-items:center; }
  .plus{ width:38px; height:38px; font-size:20px; }
  .leaf__bin{ width:40px; height:40px; }
  .talk__row .btn{ min-height:44px; }

  /* and the shelf headings stop being whispers */
  .carved{ font-size:12px; letter-spacing:.22em; }
  .shelfnote{ font-size:12px; }
}

@media (max-width:420px){
  /* the very small ones: give the reading text a little more room */
  .sheet{ padding-inline:16px; }
  .anote{ padding-inline:12px; }
}

/* the last few, found by measuring rather than by looking ---------------- */

@media (max-width:760px){
  /* tag pills are labels, not prose, but 11px is still a squint */
  .anote__tags span,
  .said__tag,
  .hit__kind,
  .spot__word em,
  .leaf__n,
  .grab__cut,
  .letread,
  .sharebox__said,
  .bar{ font-size:12px; }

  /* "the shelf" was an 91x16 target -- about a third of a fingertip */
  .rail__back,
  .sheet__where a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-right:8px;
  }

  .railbtn,.rail__shut{ width:44px; height:44px; }
  .addslot{ min-width:52px; }
}

/* -------------------------------------------------------------------------
   THE BUTTON IN THE TOP LEFT

   There were three of these -- Pages, the map, and "Just the writing" --
   and every one of them had to be made nearly solid black to be readable,
   because on a phone they do not sit beside her paper, they sit on it.
   Half-dark on cream came out the same grey as the icon inside it, about
   1.1 to 1 against its own mark, which is a button with nothing on it.

   Three near-black squares on cream paper was the loudest thing on the
   page. Two of them are gone now: the map has its own door on the shelf,
   and quiet is the default instead of a button. The one that is left is
   the way back to your own pages, and it keeps its weight -- it is not
   dimmed to be polite, it fades right out while she writes and comes back
   whole the moment she touches anything. See "the room goes quiet" in
   desk.css.
   ------------------------------------------------------------------------- */

@media (max-width:760px){
  .railbtn{
    opacity:1;
    background:rgba(12,8,5,.86);
    border-color:rgba(216,178,106,.42);
    color:var(--cream);
  }
  .railbtn svg{ width:20px; height:20px; }
}

/* the mic is the point of a phone, so it keeps its label everywhere */
@media (max-width:760px){
  #mic .bar__word{ display:inline !important; font-size:12px; }
  #mic{ min-height:44px; padding:8px 12px; }
}

/* -------------------------------------------------------------------------
   THE MENU BUTTON AND THE WAY BACK -- MOVED TO desk.css

   The rule that got PAGES out from on top of "<- The shelf" used to live
   here. It has gone to desk.css, next to the button it is about, for one
   blunt reason: this file has now arrived on the live server as ZERO BYTES
   twice, and the second time it took this fix with it -- the bug was
   reported again while the rule for it was sitting right here, correct,
   in a file the server had emptied.

   A rule whose only copy lives in the file with a history of not arriving
   is a rule that will go missing again. It is not phone-only anyway: the
   button that opens a drawer should step aside when the drawer is open, at
   any width.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   THE LITTLE ARROWS, ON A THUMB

   Three small buttons in a row and one of them removes things. So on a
   phone they get a full 44px of height, and there is a real gap before
   the × -- if you miss the down arrow you want to hit nothing, not the
   thing that takes a page away.
   ------------------------------------------------------------------------- */

@media (max-width: 760px){
  .leaf__up{ width:40px; height:44px; font-size:16px; opacity:.5; }
  .leaf__bin{ width:40px; height:44px; font-size:20px; margin-left:9px; }
  .leafrow .leaf{ padding-top:11px; padding-bottom:11px; }
}

/* the end of the book sits under the last chapter, with room around it */
.rail__scroll .lookbtn--end{ margin:22px 0 30px; }
.rail__scroll .doneline{ margin:22px 0 30px; }

/* the way out of a card is a thumb target like everything else */
@media (max-width: 760px){
  .tray__x{ width:44px; height:44px; font-size:26px; right:6px; top:6px; }
  .tray__card h3{ padding-right:48px; }
}

/* =========================================================================
   MEASURED AGAIN, ON A BRAND NEW BOOK

   Everything below was found by opening a book that had just been made
   on a 375px screen and measuring every single thing you can tap or
   read. These all failed one of the two house rules: nothing you tap is
   under 44px, nothing you read is under 12px.
   ========================================================================= */

@media (max-width:760px){

  /* ---- the switch that puts your book in front of other people --------
     It was a 14px box with 10.5px words beside it: the smallest target
     on the page, attached to the one setting that shows your writing to
     strangers. The whole row is the target now. */
  .shareline{
    display:flex; align-items:center; gap:11px;
    min-height:44px; padding:4px 2px;
    font-size:12.5px; letter-spacing:.1em;
  }
  .shareline input[type=checkbox]{
    width:22px; height:22px; flex:0 0 auto;
    accent-color:var(--gold);
  }

  /* ---- the three buttons under the book's name --------------------- */
  .lookbtn{ min-height:44px; font-size:12px; }

  /* ---- "+ page", "+ chapter", "+ card", "+ paste from notes" --------
     These are how you add anything at all. 41px each. */
  .addline{ min-height:44px; display:flex; align-items:center; }

  /* ---- the book's own name --------------------------------------- */
  .rail__title{ min-height:44px; font-size:19px; }

  /* ---- the search box in the list -------------------------------- */
  .rail__find{ min-height:44px; font-size:16px; }

  /* ---- the name of the page you are writing ---------------------- */
  .sheet__title{ min-height:44px; }

  /* ---- the clock in the corner of the bottom bar ------------------
     44 tall but 37 wide, which is a thumb-and-a-half of nothing. */
  .bar__btn{ min-width:44px; justify-content:center; }

  /* ---- lines that were still whispers ----------------------------- */
  .letread,
  .letread em,
  .grab__why,
  .sharebox__said{ font-size:12px; }
}

/* =========================================================================
   AND THE SAME SWEEP ON EVERY OTHER PAGE

   Measured the front door, the map, the shelf, the reading page and the
   you page at 375px wide. These are what failed.
   ========================================================================= */

@media (max-width:760px){

  /* ---- the front door ---------------------------------------------
     "the door is open" was 9px. It is the first instruction anybody in
     this whole shop is ever given, and it was the smallest text in it. */
  .knock{ font-size:12px; letter-spacing:.2em; }

  /* ---- the map ------------------------------------------------------ */
  .map__hint{ font-size:12px; letter-spacing:.2em; }

  /* ---- the + that starts a book -------------------------------------
     The single most important button for somebody who has never used
     this before, at 38px across. */
  .plus{ width:44px; height:44px; font-size:22px; }

  /* ---- every plain text box ---------------------------------------- */
  .field{ min-height:44px; font-size:16px; }

  /* ---- the books themselves ---------------------------------------
     A spine is as wide as the book is long, which is the point of the
     shelf. But a book nobody has written in yet came out 33px across,
     and 33px is not a thumb. The thin ones stop at 44 and everything
     above that is untouched, so a fat book still looks fat.
     Delete this one rule to go back to true widths. */
  .spine{ min-width:44px; }
}

/* =========================================================================
   THE REST OF THE MEASURED SWEEP

   Found by six readers going through every screen at 375px and then
   arguing with each other about whether each one was real. These are the
   ones that survived the argument.
   ========================================================================= */

@media (max-width:760px){

  /* ---- the little count badges -------------------------------------
     One line lifts "My books 4", the notes count and the chat count all
     at once -- they share a rule. */
  .leaf__n,
  .unit__count,
  .notes__n,
  .talk__n{ font-size:12px; }

  /* ---- the colours in "how it looks" -------------------------------
     Fourteen leathers at 30px each, which is a fingertip and a half of
     guessing on the one screen that is about choosing. */
  .swatch{ width:44px; height:44px; }
  .pick{ min-height:44px; font-size:13px; }
  .pickrow__what{ font-size:12px; }

  /* ---- the word count is a button, not decoration ------------------
     It was hidden outright under 430px, which took away the only place
     that says how much you have written. It stays, smaller. */
  #counts{ display:inline-flex !important; font-size:12px; padding:8px; }

  /* ---- finishing ---------------------------------------------------- */
  .doneline{ font-size:12px; }
  .doneline__re{ display:inline-flex; align-items:center; min-height:44px; font-size:12px; }

  /* ---- the history list --------------------------------------------- */
  .ver__when,
  .ver__ago,
  .ver__n,
  .look__n{ font-size:12px; }

  /* ---- taking a comment down ---------------------------------------- */
  .said__x{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; font-size:20px;
  }
  .said__when{ font-size:12px; }

  /* ---- a long word or a pasted link must not push the page sideways -- */
  .said__body,
  .anote__body,
  .sheet__body,
  .hit__bit{ overflow-wrap:anywhere; }

  /* ---- the way back off a shared book -------------------------------- */
  .backto button{ min-height:44px; }
}

/* -------------------------------------------------------------------------
   TRAYS, WITH THE KEYBOARD UP

   Every card in the writing room centres itself in the whole window, and
   the window does not shrink when the keyboard arrives. --kb is how much
   is covered; desk.js has published it for a long time and nothing was
   reading it.
   ------------------------------------------------------------------------- */

.tray{ padding-bottom:calc(20px + var(--kb, 0px)); }
.tray__card{ max-height:calc(86svh - var(--kb, 0px)); }

/* -------------------------------------------------------------------------
   THE LIST, WITH THE KEYBOARD UP

   Searching from the drawer's own search box raised the keyboard over
   the results it was about to show.
   ------------------------------------------------------------------------- */

@media (max-width:820px){
  .rail{ bottom:var(--kb, 0px); }
}

/* -------------------------------------------------------------------------
   HIGHLIGHT SOME WORDS AND KEEP THEM

   The bar that comes up when you select text: five buttons, each with a
   little line under it saying what it does. Those lines were 9.5px --
   the smallest text left anywhere in the shop, on the one control that
   has to be understood in a second while your thumb is already on it.
   ------------------------------------------------------------------------- */

@media (max-width:760px){
  .grab__btn{ min-height:44px; font-size:13px; }
  .grab__btn em{ font-size:12px; font-style:normal; opacity:.75; }
  .grab__cut em{ font-size:12px; }
  .grab__cut input{ width:22px; height:22px; }
  .grab__what{ font-size:12.5px; }
}

/* =========================================================================
   THE LIST IS A SCREEN, NOT A DRAWER

   This is how every phone app people already know does it -- Notes most
   of all. You are either in the list or in the writing, never squinting
   at a 280px column with the page half-showing behind it.

   Full width also gives a chapter name room to be a chapter name.
   ========================================================================= */

@media (max-width:760px){
  .rail{ width:100%; max-width:100%; }
  .rail__title{ font-size:22px; }
  .leaf{ font-size:17px; }
  .leaf--chapter{ font-size:17.5px; }

  /* the dark behind it is pointless when it covers the whole screen */
  body.is-railed::after{ display:none; }

  /* turning a page: side by side is too narrow for a name, so stack */
  .pager{ margin-top:36px; }
  .pager__go{ flex:1 1 100%; min-height:60px; }
  .pager__way{ font-size:12px; }
  .pager__name{ font-size:17px; }
}

/* -------------------------------------------------------------------------
   ROOM FOR THE MENU BUTTON

   It is pinned to the top-left corner, and the name of the page starts in
   that same corner, so the two sat on top of each other.
   ------------------------------------------------------------------------- */

@media (max-width:820px){
  /* 56px cleared an icon-only button. The button now carries the word
     "Pages" and runs to x 107 on a 375px phone, so the line that says
     which chapter you are in was starting underneath it. Measured, not
     guessed: 107 - 16 for the sheet's own inset, plus a thumb of gap. */
  .sheet__where,
  .sheet__title{ padding-left:100px; }
  /* The reading room has no Pages button -- there is nothing to open, you
     are reading somebody's book, not writing one. read.php says so by
     putting is-focused on its body, and this is the one thing that class
     still does anywhere in the shop. Do not delete it with the rest: the
     title would start 100px in, against nothing. */
  body.is-focused .sheet__where,
  body.is-focused .sheet__title{ padding-left:0; }

  /* the last page's pager must clear the save bar */
  .pager{ margin-bottom:calc(18px + var(--kb, 0px)); }
}

/* -------------------------------------------------------------------------
   WHEN THE LIST IS THE WHOLE SCREEN, IT IS THE WHOLE SCREEN

   At 280px wide a nearly-opaque panel over a dark room looked like a
   panel. Stretched across a bright page it went translucent and the
   writing underneath read straight through the chapter names.

   And the page keeps its own things pinned above everything at z-index 9,
   so the page's buttons floated on top of the list. The map and focus
   buttons are gone now and the menu button already hides itself while the
   list is open, so the save bar is the last one that needs telling.
   ------------------------------------------------------------------------- */

@media (max-width:760px){

  body.is-railed .rail{
    background:linear-gradient(180deg,#100b07,#080503);
  }

  /* the page's controls belong to the page */
  body.is-railed .bar{ display:none !important; }

  /* so the way out of the list is the only thing in that corner */
  body.is-railed .rail__shut{
    z-index:12;
    background:rgba(216,178,106,.1);
    border:1px solid rgba(216,178,106,.28);
    border-radius:4px;
    color:var(--cream);
  }

  /* nothing under the list should scroll behind it */
  body.is-railed .desk__main{ overflow:hidden; }
}