/* ------------------------------------------------------------------
   Interval Desk: the parts every section shares.

   Five pages were each carrying their own copy of this, which is how
   the sections drifted apart: a fix made in one was a fix made in one.
   Anything here is the same everywhere by construction rather than by
   somebody remembering.

   Colours come from the page's own :root, which every section already
   declares, so this file adds no tokens of its own and cannot fight
   what a page has set.
   ------------------------------------------------------------------ */

/* ---------- the palette ----------
   One copy. There were five, and they had drifted: Exhibitions and
   Events came from the standalone editor and were still on #111 and
   #666 where the rest of the Desk uses #1c1b17 and #77736a, which is
   why those two always looked very slightly colder than the others.

   Pages keep their own :root for anything only they need, such as the
   artist database's status colours. Anything shared belongs here. */
:root{
  --cream:#faf8f3;
  --paper:#ffffff;
  --ink:#1c1b17;
  --muted:#77736a;
  --faint:#a39e93;
  --line:#e5e1d6;
  --line-dark:#cfc9ba;
  --hover:#f3f0e7;
  --umber:#7d5a3c;
  --alert:#8a4a3a;
  --tag:#efece3;

  /* Names Exhibitions and Events already use throughout. Aliases rather
     than a rename, so their markup did not have to be rewritten to gain
     the right colours. */
  --bg:var(--cream);
  --field:var(--paper);
  --line2:var(--line-dark);
  --accent:var(--ink);

  --text:"adobe-aldine",Georgia,"Times New Roman",serif;
  --caption:"adobe-aldine-caption","adobe-aldine",Georgia,serif;
}

/* ---------- iOS Safari's focus zoom ----------
   Under 16px, Safari zooms the page when a field takes focus and never
   zooms back out. Every section gates on a passphrase field focused on
   load, and three of the five were under the threshold: Artists at
   13px, Exhibitions and Events at 14px. So signing in on an iPhone left
   the page zoomed, on the sign-in screen, before anything else had
   happened.

   Here rather than in each page, because this is exactly the kind of
   rule that gets added to four of five and then forgotten.

   !important, which is worth explaining because it is usually the wrong
   answer. This file is linked before each page's own styles, and two
   different things were beating it: Contacts and Artists set
   `input{font-size:13px}`, which wins on source order at equal
   specificity; Exhibitions and Events set `.gate input{font:inherit}`,
   which wins on specificity whatever the order. Raising specificity
   fixed the first and not the second, and chasing the second means
   naming another page's classes in a shared file.

   Both were verified failing in a real browser before this was written,
   which is the only reason to reach for it. */
@media (max-width:760px){
  input,select,textarea{font-size:16px !important}
}

/* ---------- asking before doing something ----------
   Replacing the browser's confirm(), prompt() and alert(), which broke
   the spell rather badly: system chrome, system type, no Aldine, and a
   single line in which to explain what is about to happen. */

.dsk-veil{
  position:fixed;inset:0;z-index:200;
  background:rgba(28,27,23,.45);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.dsk-veil[hidden]{display:none}

.dsk-box{
  background:var(--cream,#faf8f3);
  border:1px solid var(--line-dark,#cfc9ba);
  box-shadow:0 12px 40px rgba(28,27,23,.18);
  width:100%;max-width:430px;padding:26px 26px 22px;
  max-height:88vh;overflow-y:auto;
}
.dsk-box h2{
  font-size:18px;font-weight:400;line-height:1.3;letter-spacing:.01em;
  margin:0 0 9px;
}
/* The sentence that says what will actually happen. The old confirm()
   had one line and no room for it, which is why so many of them just
   said "Are you sure?". */
.dsk-box .dsk-body{
  color:var(--muted,#77736a);font-size:13.5px;line-height:1.7;
  margin:0 0 20px;max-width:52ch;white-space:pre-wrap;
}
.dsk-box .dsk-body b{color:var(--ink,#1c1b17);font-weight:400}

.dsk-box label{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted,#77736a);margin:0 0 6px;
}
.dsk-box input[type=text]{
  width:100%;background:var(--paper,#fff);
  border:1px solid var(--line-dark,#cfc9ba);
  padding:10px 11px;font:inherit;font-size:14px;color:var(--ink,#1c1b17);
  border-radius:0;margin-bottom:20px;
}

.dsk-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dsk-bar button{
  font:inherit;cursor:pointer;background:none;
  border:1px solid var(--ink,#1c1b17);color:var(--ink,#1c1b17);
  padding:10px 20px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.dsk-bar button:hover{background:var(--ink,#1c1b17);color:var(--cream,#faf8f3)}
.dsk-bar .dsk-no{border-color:var(--line-dark,#cfc9ba);color:var(--muted,#77736a)}
.dsk-bar .dsk-no:hover{background:none;border-color:var(--ink,#1c1b17);color:var(--ink,#1c1b17)}
/* Anything that destroys something wears the alert colour, so the
   difference between "save" and "delete everything" is visible before
   it is read. */
.dsk-bar .dsk-danger{border-color:var(--alert,#8a4a3a);color:var(--alert,#8a4a3a)}
.dsk-bar .dsk-danger:hover{background:var(--alert,#8a4a3a);color:var(--cream,#faf8f3)}

.dsk-box :focus-visible{outline:2px solid var(--ink,#1c1b17);outline-offset:2px}

/* ---------- what just happened ---------- */
.dsk-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink,#1c1b17);color:var(--cream,#faf8f3);
  padding:11px 20px;font-size:12px;letter-spacing:.04em;z-index:210;
  display:flex;gap:16px;align-items:center;max-width:90vw;
}
.dsk-toast button{
  font:inherit;background:none;border:none;cursor:pointer;
  color:var(--cream,#faf8f3);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}

/* Announcements for a screen reader. Visually gone, never display:none,
   which would stop it being read at all. */
.dsk-said{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .dsk-veil,.dsk-toast{transition:none}
}

/* One breakpoint, not the four the five pages had between them. */
@media (max-width:760px){
  .dsk-box{padding:22px 20px 18px}
  /* Under 16px and iOS Safari zooms the field on focus and never zooms
     back out. */
  .dsk-box input[type=text]{font-size:16px}
  /* The Desk's button is 34px high, which is right for a mouse and too
     small for a thumb. Only widened where there are thumbs, so the two
     do not have to disagree. */
  .dsk-bar button{flex:1 1 auto;text-align:center;min-height:44px}
}

/* ------------------------------------------------------------------
   Native controls, wearing the Desk's clothes rather than iOS's.

   A <select> left at its default -webkit-appearance is not styled by
   the page at all on an iPhone: iOS draws its own rounded, shaded box
   and ignores the border and background the page asked for. So the
   filters that are three quiet underlines on the desktop arrive on the
   phone as three fat lozenges. Turning appearance off is the only way
   to be given the box back, and having taken the box back the page
   owes it an arrow, which is the one below.

   Two pages had already worked this out and written their own copy
   (the artists toolbar and the dialling-code field); this is that same
   rule kept in one place. Where a page sets its own padding on a
   select it must leave room on the right for the arrow -- that is what
   the padding-right lines dotted through the sections are for.

   Checkboxes are deliberately left alone: appearance:none on those
   takes away the tick and draws nothing in its place.
   ------------------------------------------------------------------ */
input,select,textarea,button{border-radius:0}
select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0l4 5 4-5z' fill='%2377736a'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}

/* ------------------------------------------------------------------
   The wait before a section knows who you are.

   Every section keeps the passphrase in localStorage and then asks the
   server whether it is still good, which is a round trip. The sign-in
   panel used to be on screen for the whole of it: you would open
   Artworks, watch a passphrase box appear -- long enough for the
   password manager to fill it in -- and then watch it vanish. It read
   as though the Desk had signed you out five times a morning.

   So the panel now starts hidden and is shown only if it is really
   wanted, and this stands in for it meanwhile: quiet, and slow to
   appear, because on a warm connection there is nothing to say.
   ------------------------------------------------------------------ */
.dsk-boot{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--cream,#faf8f3);z-index:55;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint,#a39e93);
  opacity:0;animation:dsk-boot-in .2s ease-out .55s forwards;
}
@media (prefers-reduced-motion:reduce){
  .dsk-boot{animation-delay:.55s;animation-duration:0s}
}
@keyframes dsk-boot-in{to{opacity:1}}