/* =========================================================================
   lights.css -- the shop by day.

   Night is how the shop was built, and every other stylesheet is night.
   This one file is what changes when somebody turns the lights on:
   the colours turn over, the lamps and candles go out, the dark washes
   that made the rooms feel lit from one candle come off, and the eight
   paintings are swapped for their daytime twins by lib/app.php art().

   Everything in here sits under html[data-lights="day"], so by night the
   file does nothing at all. Loaded after phone.css: a phone by day is
   still by day.

   The switch itself is at the bottom, and that part is for both.
   ========================================================================= */

/* --- the colours, turned over -------------------------------------------

   Same names as base.css, day values. Everything that paints with a name
   flips at once; what follows is only the handful of places that paint
   with a number. Warm and papery, not white -- the shop is still wood
   and paper, just with the shutters open. */

html[data-lights="day"]{
  --ink:        #e6dcc6;
  --night:      #ddd1b8;
  --night-soft: #d3c5a8;

  --wood:       #c9b48f;
  --wood-lit:   #e0d2b3;
  --wood-deep:  #b39d76;
  --wood-edge:  #8b6a42;

  /* Measured against the sunlit hall painting (average rgb 166,145,121):
     the first day set had names at 2.6:1 and small grey notes at 2.1:1.
     These read at 4.5:1 or better on that painting, and on the paper. */
  --gold:       #3f2b0c;
  --gold-soft:  #4a3512;
  --gold-dim:   #5e4620;
  --flame:      #5a3a0a;
  --flame-hot:  #3a2506;

  --cream:      #271f16;
  --cream-dim:  #2c241a;
  --cream-far:  #332a1f;

  /* the three colours that mean something, dark enough to read on paper */
  --red:        #9a3522;
  --green:      #3f6b2a;
}

/* --- base.css: the few things there painted with a number --------------- */

/* the page under every painting: some rooms pin it to night-black by
   number, so it has to be said again here, by name, for all of them */
html[data-lights="day"] body,
html[data-lights="day"] body.desk,
html[data-lights="day"] body.shelf{ background:var(--ink); }
html[data-lights="day"] .room{ background:var(--ink); }   /* the desk pins its room to #0a0705 */

html[data-lights="day"] .field{
  background:rgba(255,255,255,.48);
  border-color:rgba(90,70,40,.32);
}
html[data-lights="day"] .field:focus{
  background:rgba(255,255,255,.68);
  border-color:rgba(143,88,16,.6);
  box-shadow:0 0 0 3px rgba(143,88,16,.12);
}
html[data-lights="day"] .field::placeholder{ opacity:.8; }

html[data-lights="day"] .btn{
  border-color:rgba(90,70,40,.34);
  background:linear-gradient(180deg, rgba(90,70,40,.09), rgba(90,70,40,.03));
}
html[data-lights="day"] .btn:hover{
  border-color:rgba(143,88,16,.6);
  background:linear-gradient(180deg, rgba(143,88,16,.16), rgba(143,88,16,.06));
}
html[data-lights="day"] .btn--quiet:hover{ background:rgba(90,70,40,.08); }

/* foil by daylight: no glow, a paper-white lift under the letters */
html[data-lights="day"] .gilt{
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
html[data-lights="day"] .carved{
  color:rgba(40,25,10,.95);
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.12);
}

html[data-lights="day"] ::selection{ background:rgba(143,88,16,.22); }
html[data-lights="day"] .grain{ opacity:.03; }

/* --- the street ----------------------------------------------------------

   The lamps are off. Every effect that is a lamp -- its glow, the rain
   caught in its light, the dust in its beam, the glare, the lightning --
   goes. The day painting already has its weather in it. */

html[data-lights="day"] .glow,
html[data-lights="day"] .lamprain,
html[data-lights="day"] .dust,
html[data-lights="day"] .street__glare,
html[data-lights="day"] .flash,
html[data-lights="day"] .rain{ display:none; }

html[data-lights="day"] .step__card{
  background:linear-gradient(180deg, rgba(250,244,230,.94), rgba(238,229,210,.96));
  border-color:rgba(90,70,40,.25);
  box-shadow:0 24px 60px rgba(40,30,20,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-lights="day"] .fork__pick{
  background:linear-gradient(180deg, rgba(90,70,40,.08), rgba(90,70,40,.03));
}

/* STEPPING THROUGH THE DOOR. By night the golden flood fills the screen
   as you go in, and the next room comes up out of the dark. By day the
   same flood went to a near-white screen for a second, and then the
   Library arrived as a blank cream page while its painting faded up --
   two blanks in a row, "part way through". So by day the flood is a
   softer wash that never fully covers, and the Library brightens from
   already-visible instead of appearing from nothing. */
html[data-lights="day"] .flood{
  background:radial-gradient(circle at 52% 50%,
      rgba(255,241,218,.92), rgba(250,232,200,.55) 32%, rgba(230,220,198,0) 68%);
}
html[data-lights="day"] .street.is-entering .flood{ animation-name:flood-in-day; }
@keyframes flood-in-day{
  0%{ opacity:0 } 62%{ opacity:.4 } 100%{ opacity:.78 }
}
html[data-lights="day"] body.is-arriving .hall{ animation-name:room-up-day; }
@keyframes room-up-day{
  from{ opacity:.62; transform:scale(1.05) } to{ opacity:1; transform:none }
}

/* --- the hall and the shelf ---------------------------------------------

   The painting is shown as painted, not dimmed to candle-light; the pool
   of candle-light on the floor and the candle itself are gone, because
   nobody lights a candle at noon. */

html[data-lights="day"] .hall__painting{ filter:none; }
html[data-lights="day"] .top{
  background:linear-gradient(180deg, rgba(236,228,210,.92), rgba(236,228,210,0));
}
/* the phone's "Pages" button floats on the desk's painting; by night it is
   a dark tile, and the day words are dark too -- so the tile goes light */
html[data-lights="day"] .railbtn{
  background:rgba(236,227,208,.94);
  border-color:rgba(90,70,40,.3);
  color:var(--cream);
}
/* on a phone the page list is a whole sheet -- by night a dark one. By day
   its words are dark, so the sheet has to be light too */
@media (max-width:760px){
  html[data-lights="day"] body.is-railed .rail{
    background:linear-gradient(180deg,#ece3d0,#ded2b8);
  }
  html[data-lights="day"] body.is-railed .rail__shut{
    background:rgba(90,70,40,.1); border-color:rgba(90,70,40,.3); color:var(--cream);
  }
}
html[data-lights="day"] .hall__pool,
html[data-lights="day"] .candle{ display:none; }
html[data-lights="day"] .hall__vignette{ opacity:.4; }

html[data-lights="day"] .gate__card{
  background:linear-gradient(180deg, rgba(250,244,230,.93), rgba(238,229,210,.95));
  border-color:rgba(90,70,40,.25);
  box-shadow:0 24px 60px rgba(40,30,20,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-lights="day"] .find .field{ background:rgba(255,255,255,.48); }

/* THE BOOKCASE IS WHITEWASHED OAK BY DAY. Its plank, its sides and the
   shading inside it are painted with numbers in shelf.css -- dark brown,
   candle-lit -- so the carved label went dark on dark the moment the
   words turned over. Same shapes, pale wood, the candle's rake gone. */
html[data-lights="day"] .row__board{
  background:
    linear-gradient(180deg, #ece3d0 0%, #e0d4ba 6%, #d5c7aa 16%, #c2b191 58%, #a99877 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 6px rgba(60,45,30,.3),
    0 14px 26px -10px rgba(40,30,20,.45);
}
html[data-lights="day"] .row__board::after{
  background:linear-gradient(180deg, rgba(60,45,30,.22), transparent);
}
html[data-lights="day"] .unit__side{
  background:linear-gradient(90deg, #d9ccb1, #bfb094 55%, #a89a7e);
  box-shadow:inset 0 0 24px rgba(60,45,30,.25), 0 8px 20px -8px rgba(40,30,20,.4);
}
html[data-lights="day"] .row__books{
  background:
    linear-gradient(180deg, rgba(60,45,30,.16) 0%, rgba(60,45,30,.06) 26%,
                            rgba(60,45,30,.06) 70%, rgba(60,45,30,.16) 100%),
    linear-gradient(90deg, rgba(60,45,30,.14), rgba(60,45,30,.03) 18%,
                           rgba(60,45,30,.03) 82%, rgba(60,45,30,.14));
  box-shadow:
    inset 0 18px 26px -14px rgba(60,45,30,.45),
    inset 0 -6px 14px -8px rgba(60,45,30,.35);
}
html[data-lights="day"] .unit{
  filter:drop-shadow(0 26px 34px rgba(40,30,20,.28)) drop-shadow(0 4px 10px rgba(40,30,20,.2));
}
html[data-lights="day"] .unit .rows::after{ background:none; }
html[data-lights="day"] .addslot{ background:none; }

/* the dark that falls over the room while a book opens */
html[data-lights="day"] .opening__room{ background:rgba(230,220,198,.72); }

/* --- the desk and the reading room --------------------------------------

   The lamp is off and the window is open. The wash that made the room a
   dark pool around one lamp becomes a light vignette so the page still
   sits forward. The rail is the same wood by daylight. */

html[data-lights="day"] .room__dark{
  background:
    radial-gradient(70% 60% at 50% 44%, rgba(255,250,240,0), rgba(50,38,26,.30) 82%),
    linear-gradient(180deg, rgba(255,250,240,.08), rgba(60,45,30,.32));
}
html[data-lights="day"] .room__lamp{ display:none; }

html[data-lights="day"] .rail{
  background:linear-gradient(180deg, rgba(236,227,208,.95), rgba(222,211,188,.97));
  border-right-color:rgba(90,70,40,.2);
  box-shadow:14px 0 44px rgba(40,30,20,.25);
}
html[data-lights="day"] .rail__find,
html[data-lights="day"] .rail__shut,
html[data-lights="day"] .paste,
html[data-lights="day"] .look__one,
html[data-lights="day"] .putrow,
html[data-lights="day"] .ver,
html[data-lights="day"] .pick,
html[data-lights="day"] .howmany label{ background:rgba(255,255,255,.4); }

html[data-lights="day"] .sheet{ box-shadow:0 0 60px rgba(40,30,20,.28); }

html[data-lights="day"] .grab{
  background:linear-gradient(180deg, rgba(236,227,208,.97), rgba(222,211,188,.98));
  border-top-color:rgba(90,70,40,.35);
}
html[data-lights="day"] .bar{
  background:linear-gradient(180deg, rgba(236,227,208,.96), rgba(222,211,188,.98));
  border-top-color:rgba(90,70,40,.2);
}
html[data-lights="day"] .tray__card,
html[data-lights="day"] .namer__card,
html[data-lights="day"] .conts__card,
html[data-lights="day"] .look__card{
  background:linear-gradient(180deg, rgba(250,244,230,.97), rgba(238,229,210,.98));
  border-color:rgba(90,70,40,.25);
  box-shadow:0 24px 60px rgba(40,30,20,.35);
}

/* Read it to me: the little window (every way to hear a page), the
   sticky row in the Reading Room, and the bar beside the page being read */
html[data-lights="day"] .voice__menu{ background:rgba(60,45,30,.42); }
html[data-lights="day"] .voice__sheet{
  background:linear-gradient(180deg, rgba(250,244,230,.97), rgba(238,229,210,.98));
  border-color:rgba(90,70,40,.25);
  box-shadow:0 24px 60px rgba(40,30,20,.35);
  color:#2a2018;
}
html[data-lights="day"] .voice__sheet .voice__from,
html[data-lights="day"] .voice__head,
html[data-lights="day"] .voice__way small,
html[data-lights="day"] .voice__more,
html[data-lights="day"] .voice__never{ color:#6b5a44; }
html[data-lights="day"] .voice__way{ border-top-color:rgba(90,70,40,.18); }
html[data-lights="day"] .voice__way .voice__btn{ border-color:rgba(90,70,40,.4); }
html[data-lights="day"] .voice--book{
  background:linear-gradient(180deg, rgba(252,248,238,.98), rgba(250,245,232,.94));
}
html[data-lights="day"] h3.rpage.is-reading{ box-shadow:inset 3px 0 0 rgba(150,110,40,.8); }

/* record it myself, inside the little window: the dot stays the one red
   (live mic) by day too, just a deeper one for the paler paper */
html[data-lights="day"] .voice__dot{ background:#a8261e; }
html[data-lights="day"] .voice__off,
html[data-lights="day"] .voice__recsay,
html[data-lights="day"] .voice__rechint,
html[data-lights="day"] .voice__recwhy{ color:#6b5a44; }
html[data-lights="day"] .voice__stop,
html[data-lights="day"] .voice__listen .voice__btn{ border-color:rgba(90,70,40,.4); }

/* the doorstep, where a stranger reads a shared book */
html[data-lights="day"] .doorstep__dark{
  background:radial-gradient(90% 80% at 50% 46%, rgba(255,250,240,.06), rgba(60,45,30,.42) 78%);
}
html[data-lights="day"] .doorstep__card{
  background:linear-gradient(180deg, rgba(250,244,230,.94), rgba(238,229,210,.96));
  border-color:rgba(90,70,40,.25);
  box-shadow:0 24px 60px rgba(40,30,20,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-lights="day"] .sharebox__link{ background:rgba(255,255,255,.45); }
html[data-lights="day"] .sharebox__said{ color:var(--green); }

/* =========================================================================
   THE SWITCH -- for both day and night.

   One underlined line, plain text, no colour: a thing you can tap is
   underlined, and colour is kept for things that mean something. It sits
   in the one corner nothing else uses (the look button and the candle are
   bottom-left, the map is top-right, the save bar is the whole bottom of
   the desk). On the desk it is not floating at all: it is the last thing
   on the rail.
   ========================================================================= */

.lights{
  position:fixed; z-index:35;
  right:calc(env(safe-area-inset-right, 0px) + 10px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
  margin:0;
}
.lights__btn{
  font:13px/1 var(--sans);
  letter-spacing:.04em;
  color:var(--cream-dim);
  background:none; border:0;
  padding:14px 10px;               /* a real tap target, not a word */
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  opacity:.78;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.lights__btn:hover,
.lights__btn:focus-visible{ opacity:1; color:var(--cream); }
html[data-lights="day"] .lights__btn{
  text-shadow:none;
  background:rgba(240,232,214,.86);      /* a plate: it sits straight on a painting */
  border-radius:4px;
  color:var(--cream);
  opacity:.92;
}
html[data-lights="day"] .lights--rail .lights__btn{ background:none; }

/* on the desk: the foot of the rail, not a corner of the screen */
.lights--rail{
  position:static;
  margin:auto 0 0;
  padding:6px 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
.lights--rail .lights__btn{ padding:12px 8px; text-shadow:none; }

/* a switch on a printed page would print */
@media print{ .lights{ display:none !important; } }

/* ---- day: the trophy shelf and the ladder -------------------------------
   The drawings follow text colour by themselves; day only softens the
   night-lamp glow (a glow reads as smudge on cream paper) and firms the
   plinth and bar tracks, which sit too faint on a light ground. */
html[data-lights="day"] .badge{ border-bottom-color:rgba(63,43,12,.25); }
html[data-lights="day"] .badge.is-earned{
  border-bottom-color:rgba(63,43,12,.5);
  background:linear-gradient(to top, rgba(63,43,12,.07), rgba(63,43,12,0) 70%);
}
html[data-lights="day"] .badge.is-earned svg{ filter:none; }
html[data-lights="day"] .rung__bar,
html[data-lights="day"] .club__line{ background:rgba(63,43,12,.16); }
html[data-lights="day"] .rung{ border-bottom-color:rgba(63,43,12,.16); }