/* The one stylesheet of every application page. SPEC.md, under "Visual
   style", says what belongs here and what does not. */

/* Reserves the space of the vertical scrollbar on every page, even one too
   short to scroll, so the content does not shift sideways when a link leads
   from a short page to a long one. */
html {
  scrollbar-gutter: stable;
  /* The thickness of every underline: that of a link and of a button drawn
     as a link (`text-decoration-thickness`), and that of the button of a
     file input (a bottom border). A whole number of pixels: browsers round
     a fraction of a physical pixel differently for the two, a text
     underline up and a border down, so only a whole number makes them
     match on every screen. */
  --underline-thickness: 1px;
}

body {
  padding: 20px;
  color: #000000;
  background-color: #ffffee;
  /* The browser's default monospace font, for all text. A browser shrinks
     monospace text (to 13 pixels, by default) when its size comes from the
     default size keyword; an explicit 1rem, the root's default size, keeps
     it at the default text size. */
  font-family: monospace;
  font-size: 1rem;
}

/* Form controls do not inherit the font by default. */
button,
input,
select,
textarea {
  font: inherit;
}

/* A label above its input, which a <br> separates from it: a little space
   between the two. The labels that wrap a checkbox have no `for`, and keep
   the checkbox on their line. */
label[for] {
  display: inline-block;
  margin-bottom: 0.3em;
}

/* A heading is spaced as a paragraph is: 1rem above and below, the 1em of
   a paragraph at the text size. The browser's own margin is in the
   heading's larger em, which would leave more space above a box's heading
   than below its last paragraph. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 1rem;
}

/* A group of checkboxes, such as the weekdays of a range, without the
   browser's border, so a form's box holds no box inside it; its legend and
   its checkboxes start at the left-hand edge of the text. */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* As a label above its input: a little space between the legend and the
   first checkbox. */
legend {
  margin-bottom: 0.3em;
  padding: 0;
}

/* Every checkbox starts at the left-hand edge of the text, as its legend
   does, without the browser's margin to its left. */
input[type="checkbox"] {
  margin-left: 0;
}

/* Moves the underline below the descenders of letters such as "p". */
a {
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: 0.3em;
}

a:link {
  color: #0000ee;
}

a:visited {
  color: #551a8b;
}

a:active {
  color: #ff0000;
}

/* The header of a guest page: the pages that lead to it, as links, then
   the page itself, as plain text. Text of the normal size, in bold. */
.crumbs {
  font-weight: bold;
}

/* A button that sends a form but looks like a link. The controls of the
   guest pages and the admin pages are text, not the browser's own buttons, which each browser
   draws differently; and they send a form, since each carries the
   password, which a plain link cannot do without putting it in the
   address. */
button.link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: inherit;
  text-align: inherit;
  color: #0000ee;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: 0.3em;
  cursor: pointer;
}

button.link:active {
  color: #ff0000;
}

/* A button that cannot be pressed for now, such as the buttons of an admin
   form while the browser asks for a passkey: grey, and not underlined. */
button.link:disabled {
  color: #808080;
  text-decoration: none;
  cursor: default;
}

/* The button of a file input, such as the upload of a document on the
   admin page, drawn as a link too. The name of the file chosen, beside it,
   is the browser's own text. The underline is a bottom border, in the
   color of the text: a browser may draw the button's text in a box of its
   own, which `text-decoration` set on the button does not reach. */
input[type="file"]::file-selector-button {
  appearance: none;
  margin: 0 1ch 0 0;
  padding: 0;
  border: 0;
  border-bottom: var(--underline-thickness) solid currentcolor;
  font: inherit;
  color: #0000ee;
  background: none;
  cursor: pointer;
}

input[type="file"]:active::file-selector-button {
  color: #ff0000;
}

/* The time zone that the calendar shows, among the zones offered. */
button.link[aria-current] {
  font-weight: bold;
}

main {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

/* A page that a one-click link is opening: its password form is about to
   be sent, so it stays hidden until the answer takes its place (see
   `opening.js`). */
html.opening main {
  visibility: hidden;
}

table {
  border-spacing: 0;
}

td,
th {
  padding: 0;
  vertical-align: top;
}

/* A table of records, such as the passkeys: space between the columns. */
table.list td,
table.list th {
  padding: 0.25em 1em 0.25em 0;
  text-align: left;
}

/* A hash is one long word: let it wrap anywhere on a narrow screen. */
.hash {
  word-break: break-all;
}

/* The pages of a document on the viewer page, as drawn by viewer.js. */
.pages canvas {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  border: 1px solid #000000;
}

/* The calendar's week table: one column per day, one slot per line. The
   table spans the width of the main element, and the fixed layout gives
   every column the same width, whatever its content. */
table.calendar {
  width: 100%;
  table-layout: fixed;
}

table.calendar th,
table.calendar td {
  padding: 0.25em 1em 0.25em 0;
  text-align: left;
}

/* The slots of a day: more space between the lines. */
table.calendar td {
  line-height: 1.8em;
}

table.calendar button {
  display: block;
}

/* The page has a column for each day from Monday to the Sunday of the
   week, and on to the last day of the five-day view. From 760 pixels on,
   the week table: the columns from Monday to Sunday, with the week
   navigation, and the year and the month as that table heads them. */
@media (min-width: 760px) {
  table.calendar th:not(.week),
  table.calendar td:not(.week),
  .day-nav,
  .view-only {
    display: none;
  }
}

/* Below 760 pixels, the five-day view: the columns from the date asked for
   on, with the day navigation, and the year and the month above the first
   of those columns. */
@media (max-width: 759.98px) {
  table.calendar th:not(.view),
  table.calendar td:not(.view),
  .week-nav,
  .week-only {
    display: none;
  }
}

/* The note field fits a narrow screen. */
textarea {
  box-sizing: border-box;
  max-width: 100%;
}

/* A guest's note keeps its line breaks. */
.note {
  white-space: pre-wrap;
}

/* The tabs of the admin page. Every section is on the page, and the tab row
   links to each section's anchor; a section shows when the anchor in the
   address is its own, or that of an element inside it, such as the anchor
   of a password that a form brings the browser back to. With no such
   anchor, the first section, the bookings, shows. Switching tabs loads
   nothing, so it asks for no passkey. */
section.tab {
  display: none;
}

/* Following the anchor of a tab, or of a section inside one, such as the
   email outbox, scrolls to the top of the page, so the tab row stays in
   view: the margin reaches above the page's top, where the browser
   stops. */
section.tab,
section.tab section[id] {
  scroll-margin-top: 100vh;
}

section.tab:target,
section.tab:has(:target),
main:not(:has(section.tab:target, section.tab :target))
  section.tab:first-of-type {
  display: block;
}

/* The tab of the section shown, in bold. */
main:not(:has(section.tab:target, section.tab :target))
  .tabs
  a[href="#bookings"],
main:has(#bookings:target, #bookings :target) .tabs a[href="#bookings"],
main:has(#activities:target, #activities :target) .tabs a[href="#activities"],
main:has(#availability:target, #availability :target)
  .tabs
  a[href="#availability"],
main:has(#documents:target, #documents :target) .tabs a[href="#documents"],
main:has(#email:target, #email :target) .tabs a[href="#email"],
main:has(#access-control:target, #access-control :target)
  .tabs
  a[href="#access-control"] {
  font-weight: bold;
}

/* The forms of the availability, documents, passwords, and passkeys
   sections of the admin page, such as the edit form of a password, below
   the table. A form shows while its anchor is in the address, which a link
   in the table leads to, so one shows at a time, and a form that a request
   sends or refuses comes back open, with its message. toggle.js hides it
   when the link is clicked again. A border sets the form apart from the
   sections around it. Its padding on the left-hand and right-hand sides
   is 1rem; above and below, the margins of its first heading and its last
   paragraph, the same 1rem, which the border keeps inside, space it. */
div.form {
  display: none;
  margin: 1em 0;
  padding: 0 1rem;
  border: 1px solid #000000;
}

div.form:target {
  display: block;
}

/* The row that pages through the document events on the admin page: the
   forms of its buttons on one line with the page number, spaced as a
   paragraph is. */
div.pager {
  margin: 1em 0;
}

div.pager form {
  display: inline;
}