/* Shared chrome for the workspace applications.
 *
 * Loaded after each application's own <style> block, so it settles the two
 * things those blocks each decided separately.
 *
 * 1. Height. Docs, Sheets and Slides lay their shell out as a flex column on a
 *    body pinned to the viewport. That is right for an application and was
 *    right until the reference material (the questions, the related tools, the
 *    licence note) was added as further children of the same column. Those
 *    blocks are about five hundred pixels tall, the shell had eight hundred to
 *    give, and the working area is the only flexible item in the column, so it
 *    was squeezed to nothing. Opening Docs gave you a toolbar and a list of
 *    questions with no document under it.
 *
 *    The fix is to stop pinning the body to the viewport. The application still
 *    fills the window on load, because the working area keeps a viewport-height
 *    floor, and the reference material sits below it where scrolling reaches it.
 *
 * 2. Motion. One curve and one duration, honoured everywhere, and none of it
 *    for anyone who has asked their system for less movement.
 */

:root {
  /* Decelerating, slightly overshoot-free. Movement should look like something
     settling rather than something stopping. */
  --app-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --app-duration: 180ms;
}

/* --- 1. The working area gets its height back ---------------------------- */

body {
  height: auto;
  min-height: 100vh;
}

.workspace-stage,
.stage-container,
.sheet-stage,
.app-stage {
  flex: 1 0 auto;
  /* 160px is the header and toolbar above it. The floor matters more than its
     precision: it stops the reference material below from claiming the space. */
  min-height: calc(100vh - 160px);
}

/* --- 2. The reference material reads as a footer, not as part of the app -- */

.os-faq,
.os-rel {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* --- 3. Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 4. One control scale ------------------------------------------------
 *
 * Measured across the six applications before this was written: nine different
 * control heights (20, 21, 24, 26, 28, 29, 30, 32, 34px) and seven different
 * corner radii (0, 4, 5, 6, 7, 8px and 50%). Each application had picked its
 * own, which is why they looked like six programs rather than one.
 *
 * One height and one radius for anything that sits in a toolbar. min-height
 * rather than height, so a control that genuinely needs to be taller still can
 * be, and so nothing that was already laid out gets clipped.
 */

:root {
  --ctl-h: 30px;
  --ctl-r: 6px;
  --panel-r: 10px;
}

[class*="toolbar"] button,
[class*="toolbar"] select,
[class*="toolbar"] input[type="text"],
[class*="toolbar"] input[type="number"] {
  min-height: var(--ctl-h);
  border-radius: var(--ctl-r);
  box-sizing: border-box;
}

/* Round things that are meant to be round stay round: colour swatches, and
   anything a stylesheet has already named as a circle or an avatar. */
[class*="toolbar"] button[class*="swatch"],
[class*="toolbar"] [class*="circle"],
[class*="toolbar"] [class*="avatar"],
.color-swatch {
  border-radius: 50%;
}

/* A finger is not a mouse pointer. Forty-four points is the smallest target
   Apple's guidelines will accept, and a dense toolbar is exactly where a
   too-small target costs you. */
@media (pointer: coarse) {
  [class*="toolbar"] button,
  [class*="toolbar"] select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- 5. One header --------------------------------------------------------
 *
 * Docs and Notes carry the same header: the Workspace mark at the left, the
 * name of what is open with a line under it saying where it is saved, and the
 * few actions that matter as pills on the right. Sheets and Slides each had
 * their own, smaller and in another typeface, so the four applications read
 * as four programs. This is that header once, in the measurements of the
 * Notes header, for any application that wants it.
 *
 * The saved line is coloured by its data-state rather than by inline styles
 * from the application, so the twelve colourways decide what "saving" and
 * "full" look like, not a hard-coded hex.
 */

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.app-head-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.app-logo {
  display: flex; flex: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -5px; text-decoration: none;
}
.app-logo svg { width: 34px; height: 34px; display: block; }
.app-head-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.app-head-title {
  width: 100%; max-width: 520px; min-width: 0;
  font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 1px 6px; margin-left: -7px; outline: none; text-overflow: ellipsis;
}
.app-head-title:hover { border-color: var(--rule); background: var(--paper-inset); }
.app-head-title:focus { border-color: var(--accent); background: var(--paper); }
.app-head-status { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.app-head-status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); margin-right: 6px; vertical-align: 1px;
}
.app-head-status[data-state="saving"]::before { background: var(--ink-faint); }
.app-head-status[data-state="full"] { color: var(--danger); font-weight: 600; }
.app-head-status[data-state="full"]::before { background: var(--danger); }
.app-head-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.app-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--rule);
  background: var(--paper-raised); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.app-btn:hover { background: var(--paper-inset); border-color: var(--accent); color: var(--accent-strong); }
.app-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--paper-raised); }
.app-btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--paper-raised); }
.app-btn svg { width: 14px; height: 14px; flex: none; }

/* A phone: the mark and the name on one row, the actions on a second row
   that scrolls sideways, as the Notes header does. */
@media (max-width: 640px) {
  .app-head { flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
  .app-head-brand { flex: 1 1 100%; }
  .app-head-titles { flex-direction: row; align-items: baseline; gap: 10px; }
  .app-head-title { flex: 1 1 auto; width: auto; max-width: none; font-size: 17px; }
  .app-head-status { flex: none; white-space: nowrap; margin: 0; }
  .app-head-actions {
    flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .app-head-actions::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) {
  .app-btn, .app-head-title { min-height: 44px; }
}

/* --- 6. One menu row -------------------------------------------------------
 *
 * Under the header, a row of named tools, as Notes has: flat items that
 * light up when they are on, scrolling sideways on a phone rather than
 * wrapping into a wall. A separator and a spring are the only furniture.
 */
.app-menu {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 12px; background: var(--paper-raised); border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.app-menu::-webkit-scrollbar { display: none; }
.app-mi {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px;
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-soft); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.app-mi:hover { background: var(--paper-inset); color: var(--ink); }
.app-mi.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.app-mi[disabled] { opacity: 0.45; cursor: default; }
.app-mi svg { width: 15px; height: 15px; flex: none; }
.app-sep { display: inline-block; width: 1px; height: 22px; margin: 0 6px; background: var(--rule); flex: none; }
.app-grow { flex: 1 1 auto; }
@media (pointer: coarse) { .app-mi { min-height: 44px; min-width: 44px; justify-content: center; } }

/* A document with changes that have not been saved yet. */
.app-head-status[data-state="dirty"]::before { background: var(--warn, #c9a227); }