/* ------------------------------------------------------------ composing

   The writing surface.

   The old arrangement put every tool above the text: a tag row, a camera
   button, an always-open recorder panel, a date field and a checklist offer,
   all at identical weight, and then somewhere to write four hundred pixels
   down. The fix is ordering and weight, not decoration. Title runs into body;
   tools sit underneath and stay quiet until you look for them. */

.compose {
  max-width: var(--measure);
}

/* The note's name and the five things you can do to the note, on one line.
 *
 * The five were in the app bar. Down here they are next to the thing they act
 * on, they stop the bar being a different shape on every screen, and they
 * answer the tray under the writing — one row for what you do to a note, one
 * for what you put into it.
 *
 * align-items: flex-end so the icons sit on the title's baseline rather than
 * floating in the middle of a 36px line of display type. */
.note-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.note-head .editor-title {
  flex: 1;
  min-inline-size: 0;
  margin-bottom: 0;
}

/* The same tray as the one under the writing, because they are a pair. */
.note-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  margin-bottom: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

/* Red only on hover. A delete button that is red at rest, sitting beside a
   note's name from the moment the note opens, reads as a warning about the
   note rather than as one control among five. */
@media (hover: hover) {
  .note-actions .tbtn.is-danger:hover {
    background: var(--bg);
    color: var(--danger);
  }
}

/* Roomier than the old title, and clearly a field you type in rather than a
   heading that happens to be grey. */
.compose .editor-title {
  font-size: var(--text-3xl);
  line-height: 1.2;
  padding: var(--space-1) 0;
}

/* On a phone the tray drops under the title rather than squeezing it: five
   controls take 180 of a 390px row, and a display-size title in the 200 that
   are left is a title that is always truncated. It stays inside the masthead,
   above the rule, so it still reads as belonging to the name and not as
   something between the name and the writing. */
@media (max-width: 640px) {
  .note-head {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .note-head .editor-title {
    flex: 1 1 100%;
  }

  .note-actions {
    margin-bottom: 0;
    margin-inline-start: auto;
  }
}

.compose-body {
  position: relative;
}

.compose-body .editor-text {
  /* About three lines. Enough that the box reads as somewhere to write and not
     so much that a one-line note is followed by a void.

     This was 240px for both cases. It was chosen so an empty note reads as a
     page waiting for words, which it does — and it left roughly two hundred
     pixels of nothing between "Thursday morning, clear the stopcock." and the
     tools underneath it. Same mistake as the viewport-height minimum before it,
     one size down: a floor that suits an empty note is not a floor that suits a
     short one. */
  min-height: 84px;

  /* Grows with what is typed, so a long note has no inner scrollbar and the
     tools stay where the writing ends. Not supported everywhere yet; where it
     is missing the min-height above is the whole behaviour, which is what this
     did before. */
  field-sizing: content;
}

/* An empty note keeps the invitation, but not a whole screen of it.

   240px of nothing between "Start writing" and the tools reads as a hole rather
   than as room, and on a gridded theme it is unmissable because the ruling draws
   the eye straight to the empty part. Six lines is enough to say the field is
   the writing and not enough to look like a mistake; the field grows from there
   as soon as anything is typed. */
.compose-body.is-blank .editor-text,
.compose-body.is-blank .note-prose.is-editable {
  min-height: 154px;
}

/* Above the body and pushed to the end of the line, small, and only once there
   is something to preview.

   Always visible, never revealed on hover. A note that already says something
   opens in preview, so this pair is the only way back to writing: hiding it
   until the pointer arrives makes editing undiscoverable, and on a phone, where
   there is no hover at all, impossible. Quiet is the right answer here, not
   absent.

   In the flow rather than floated into the corner, which is what it used to be.
   A corner works while the text underneath runs the same way as the interface
   around it, and a note's direction comes from the note: somebody reading the
   app in English writes in Arabic, the text goes to the right, and it goes under
   these two buttons. The other way round in an Arabic interface. There is no
   corner that is safe when either corner may hold the first line, so it no
   longer sits over the text at all.

   margin-inline-start: auto rather than an alignment, so it follows the
   interface's direction and lands at the end of the line either way. */
.compose-modes {
  display: flex;
  width: fit-content;
  margin-inline-start: auto;
  margin-block-end: var(--space-2);
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-control);
  background: var(--surface-3);
}

.compose-mode {
  min-height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.compose-mode.is-current {
  background: var(--bg);
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* ---- the toolbar ----
   One line under the writing that does not wrap, with a hairline above it.

   This was seven labelled links laid straight across, and at that width it was
   not a toolbar but a paragraph: three wrapped rows on a phone, under notes
   that were often shorter than the controls beneath them. The words are now in
   the title of each glyph, which is where a hover and a screen reader both look
   for them, and the row is about a fifth as tall.

   Everything else this block holds — a date, a rhythm, the tags — sits below
   the tray rather than inside it, so the tray is only ever buttons and only
   ever one line high. */

.compose-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.compose-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A tray the buttons sit in, not a strip of them floating on the page. It is
   sized to its contents so it never reads as a bar spanning a note it is
   subordinate to. */
.toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  max-inline-size: 100%;
}

/* Square, and a tab like every other button in this app: the top corners
   rounded, the bottom two square. At this size that reads as a row of small
   index tabs standing in a tray, which is the same idea the app bar states at
   full size — and it is the whole reason the tab shape was chosen, so a row of
   plain rounded boxes here would undo it.

   No border of its own. Seven outlines inside one outlined tray is a grid, and
   a grid is heavier than the thing it sits under. The hover fill is what says a
   glyph is a control. */
.tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 30px;
  flex: none;
  border: none;
  border-radius: var(--radius-tab) var(--radius-tab) 0 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .tbtn:hover {
    background: var(--bg);
    color: var(--ink);
  }
}

.tbtn:active {
  transform: translateY(1px);
}

/* Held down rather than hovered: the lock, when a note is locked. */
.tbtn.is-on {
  background: var(--bg);
  color: var(--ink);
}

.tbtn.is-busy {
  color: var(--ink-faint);
  pointer-events: none;
}

/* What you capture, then what you add to it. The hairline is doing the work of
   a heading nobody would want to read. */
.tbtn-sep {
  inline-size: 1px;
  block-size: 16px;
  flex: none;
  margin-inline: var(--space-2);
  background: var(--border);
}

/* The date field, once it is wanted. Bordered because it takes typing, unlike
   its neighbours which take one press. */
/* A field wearing the tool class, so it takes the tool's metrics and not its
   shape: this holds a date picker, and a tab-shaped input is a mistake. */
.tool-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink);
  font-size: var(--text-sm);
}

.tool-field.is-due {
  border-color: var(--danger);
  color: var(--danger);
}

/* The date control sits inside the pill rather than being a second one.
 *
 * .tool-field is already a bordered, padded, rounded thing, and the picker's
 * trigger is another: dropped in as it comes, it drew a box inside a box with
 * two lots of padding between the words and the edge. The rule this replaces did
 * the same flattening for the datetime-local input that used to be here, and was
 * left pointing at a class nothing renders any more.
 *
 * Colour is inherited so the whole pill turns red together when a note is
 * overdue, rather than the border going red around text that did not. */
.tool-field .datepicker,
.tool-field .datepicker-trigger {
  min-block-size: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: var(--text-sm);
}

.tool-field .datepicker-icon {
  color: inherit;
  opacity: 0.7;
}

/* The gap the trigger's own padding used to provide, put back where it belongs:
   between the two things, not around each of them. */
.tool-field .datepicker-trigger {
  gap: var(--space-2);
}

/* Nothing inside may be wider than the pill can be, or a date in a long month
   pushes the clear button off the end of the row. */
.tool-field .datepicker-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 22ch;
}

.tool-clear {
  display: inline-flex;
  align-items: center;
  color: var(--ink-faint);
}

@media (hover: hover) {
  .tool-clear:hover {
    color: var(--danger);
  }
}

/* On a phone the buttons grow rather than the row wrapping. Seven of them at
   38px is under 300px, so the whole toolbar fits across a 390px screen with
   room to spare — which is what removed the "More" control that used to hide
   five of them behind a press. */
@media (max-width: 640px) {
  .tbtn {
    inline-size: 38px;
    block-size: 34px;
  }

  .tbtn-sep {
    margin-inline: var(--space-1);
  }

  .tool-field .due-input {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbtn {
    transition: none;
  }

  .tbtn:active {
    transform: none;
  }
}

/* The tabs on a notebook: Notes, People, Activity.

   Underlined rather than boxed, and scrollable rather than wrapping. A wrapped
   tab strip changes height when the selection moves, which shifts everything
   below it; scrolling keeps the row one line at every width. */
.tabs {
  display: flex;
  gap: var(--space-1);

  /* The same gutter the page head and body use. The nav is a sibling of both,
     so nothing gives it one otherwise. */
  margin: 0 0 var(--space-4);
  padding-inline: var(--space-6);
  max-width: 100%;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs-tab {
  flex: none;
  border: none;
  background: none;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);

  /* A full touch target: this is a control people hit with a thumb while
     holding the phone in the same hand. */
  min-height: var(--touch-min);
}

@media (hover: hover) {
  .tabs-tab:hover {
    color: var(--ink);
  }
}

.tabs-tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

.tabs-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

@media (max-width: 560px) {
  /* Tighter, not wider.

     This began as a negative margin to bleed the strip edge to edge, which was
     wrong twice over: the nav sits outside .page-body, so the margin cancelled
     padding that was never applied to it, and the result was a strip sixteen
     pixels wider than the viewport and a page that scrolled sideways on every
     notebook. Edge-to-edge is a nicety; a page that slides under your thumb is
     a fault. */
  .tabs-tab {
    padding-inline: var(--space-3);
  }
}

/* Said quietly. Somebody with unsaved work needs to know the note moved, and
   does not need it shouted at them mid-sentence. */
.compose-notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* ---- what comes after the last word ---- */

.pub-after {
  max-inline-size: 44rem;
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The one piece of persuasion on the page, and it sits under the writing where
   somebody who liked what they read will reach it. Above the fold it would be an
   advertisement wrapped around somebody else's words. */
.pub-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--bg);
}

.pub-cta-mark {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-control);
  background: var(--primary-soft);
}

.pub-cta-title {
  margin: 0 0 2px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.pub-cta-body {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  max-inline-size: 44ch;
}

.pub-cta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.pub-cta-secondary {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .pub-cta-secondary:hover {
    color: var(--ink);
  }
}

/* Comments need an account, and the page says so rather than showing a box that
   fails when it is submitted. */
.pub-talk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-panel);
}

.pub-talk-note {
  margin: 0;
  flex: 1;
  min-inline-size: 14rem;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* A phone is where most of these links are opened. The sheet loses its edges and
   becomes the page, because a card with margins on a 390px screen is a narrower
   column of text for no reason. */
@media (max-width: 700px) {
  .pub {
    padding: 0 0 var(--space-12);
  }

  .pub-paper {
    padding: var(--space-8) var(--space-4);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .pub-title {
    font-size: var(--text-2xl);
  }

  .pub-body {
    font-size: var(--text-base);
  }

  .pub-after {
    padding-inline: var(--space-4);
  }

  /* The mark, the words and the button stop competing for one row. */
  .pub-cta {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-4);
  }

  .pub-cta-actions {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------- what a note might be called
 *
 * An offer, and it has to read as one. Chips rather than a filled panel: this
 * sits under somebody's writing and must not compete with it, and pressing one
 * is a decision rather than a confirmation of something already done. */

.suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.suggest-lead {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-inline-size: 24rem;
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

@media (hover: hover) {
  .suggest-chip:hover {
    border-style: solid;
    border-color: var(--primary);
    color: var(--ink);
  }
}

.suggest-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title is the longer one and the one most likely to be taken. */
.suggest-title {
  font-weight: var(--weight-medium);
}

.suggest-dismiss {
  border: 0;
  background: none;
  padding: 0 var(--space-2);
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

@media (hover: hover) {
  .suggest-dismiss:hover {
    color: var(--ink);
  }
}

/* The one block on the page that nothing above it can undo. Set apart by a rule
   and a heading in the danger colour rather than by a red panel: a red panel
   makes the whole section read as an error that has already happened, and this
   one is an offer nobody has accepted yet. */
.setting-danger {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.setting-danger .setting-heading {
  color: var(--danger);
}

/* Typing a word to confirm. Wide enough that a whole email address is visible
   while it is checked against the one on screen. */
.confirm-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* ---- what else there is to know about a note ----

   Versions, backlinks and sharing, behind one word. Styled as a quiet line
   rather than a panel: it is a door, and a door that looks like a room is the
   thing that made these three take up half a phone screen in the first place. */

.note-extras {
  max-width: var(--measure);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.note-extras-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  /* A real target, and one that reads as pressable without being a button. */
  min-height: 44px;
  padding-inline: var(--space-1);

  color: var(--ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;

  /* The default triangle is drawn at whatever size and colour the browser
     fancies and sits outside the flex row. The caret below is ours. */
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.note-extras-summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .note-extras-summary:hover {
    color: var(--ink);
  }
}

.note-extras-summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* Points along the row when shut and down into the contents when open, so the
   state is legible before anything moves. */
.note-extras-summary .icon {
  transition: transform var(--duration-fast) var(--ease-out);
}

.note-extras[open] > .note-extras-summary .icon {
  transform: rotate(90deg);
}

.note-extras-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
}

/* Inside the disclosure the three no longer need their own top rules: the
   disclosure is the rule, and three more would be the stack this replaced. */
.note-extras-body > * {
  margin-top: 0;
  border-top: none;
}

@media (prefers-reduced-motion: reduce) {
  .note-extras-summary,
  .note-extras-summary .icon {
    transition: none;
  }
}