/* App-only rules the prototype never needed. Tokens only: no raw colours here.
   Load order: tokens.css, base.css, views.css, editor.css, app.css. */

/* Self-hosted Plus Jakarta Sans (design guide §8). Variable weight 400–800. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tiptap internals (library structure, not design). Scoped under .ed-body so they never reach
   other pages. Colours come from tokens. */
.ed-body.ProseMirror {
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}
.ed-body .ProseMirror [contenteditable="false"] { white-space: normal; }
.ed-body .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
.ed-body .ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid var(--text);
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ed-body.ProseMirror-focused .ProseMirror-gapcursor,
.ed-body .ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.ed-body .tableWrapper { overflow-x: auto; }
.ed-body .resize-cursor { cursor: ew-resize; cursor: col-resize; }
.ed-body .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: -2px;
  width: 4px;
  z-index: 20;
  background-color: var(--accent);
  pointer-events: none;
}
.ed-body .selectedCell { background: var(--accent-tint); }

/* Rules for markup the prototype styled inline. Same values, now named. */

/* Skeleton (loading state): the title, line and three cards. */
.skel-title { height: 44px; width: 40%; }
.skel-line { height: 22px; width: 60%; margin-top: 14px; }
.skel-cards { margin-top: 28px; }
.skel-card { height: 150px; }

/* Toast: fades out before it is removed. */
.toast.is-leaving { opacity: 0; transition: opacity .2s; }

/* Sidebar foot: the larger avatar. */
.who.side-who { width: 36px; height: 36px; font-size: 13px; background: var(--accent-tint-2); color: var(--accent-strong); }

/* Create sheet: the smaller place chip under the title. */
.place-chip.place-chip-sheet { min-height: 36px; padding: 0 12px; margin-top: 8px; font-size: 14px; }

/* Phase 3: named rules for markup the prototype styled inline (same values). Tokens only,
   except the swatch colours, which are an open gap (plan §9.1 G11). */

/* Area card header row, and the restricted mark inside it. */
.acard-top { display: flex; align-items: center; gap: 14px; }
.acard-id { flex: 1; min-width: 0; }
.acard-id .n { display: block; }
.acard-id .restrictmark { margin-top: 6px; }

/* Palette search: the field is the whole row, so the focus mark is the row's underline, not a ring that the panel clips. */
.pal-in:focus-within { border-bottom-color: var(--sky-strong); box-shadow: inset 0 -1px 0 var(--sky-strong); }
.pal-in input::-webkit-search-cancel-button, .pal-in input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Selection: the check box sits on the card, and selecting mode shifts the card content. */
.cw > .sel-box { position: absolute; left: 12px; top: 12px; z-index: 2; }
.agrid .cw > .sel-box { top: 31px; left: 16px; }   /* centred on the area avatar */
body.selecting .cw > .mcard { padding-left: 46px; }
body.selecting .cw > .row { padding-left: 52px; }
/* A file tile's Final mark sits in the tile's corner. */
.thumb .finalmark { position: absolute; right: 10px; top: 10px; }
/* The ⋯ button on a file tile sits in its top-right corner. */
.more.on-thumb { top: 8px; right: 8px; }

/* Search field with a clear button. */
.search-wrap { position: relative; }
.search-wrap .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* Password field with a show/hide button. */
.pw-row { position: relative; }
.pw-row .input { padding-right: 52px; }
.pw-row .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.pw-meter i.s0 { width: 0; }
.pw-meter i.s1 { width: 25%; }
.pw-meter i.s2 { width: 50%; }
.pw-meter i.s3 { width: 75%; }
.pw-meter i.s4 { width: 100%; }

/* Shared-link pages (guest views). The centred "link unavailable" card: */
.vcard-center { text-align: center; padding: 48px 28px; }
.vcard-center .empty.small { padding: 0; }
.vcard-center .empty .art { margin: 0 auto 18px; }
.vcard-center .empty h3 { font-size: 22px; }
.vcard-center .empty p { margin: 10px auto 0; }
/* A shared file or note: spacing inside the card. */
.vcard-narrow { max-width: 520px; margin: 0 auto; }
.vcard-narrow .field { margin-top: 20px; }
.vcard-narrow .btn { width: 100%; }
.ktile-lg { width: 56px; height: 56px; border-radius: 18px; }
.vcard .ktile-lg + .h-page { margin-top: 16px; }
.vcard .h-page + .muted { margin-top: 8px; }
.vtitle { margin-top: 4px; }
.vtags { margin-top: 14px; }
.vbody { margin-top: 22px; caret-color: transparent; }
.vnote { margin-top: 14px; color: var(--text-2); }
.vimg { margin-top: 20px; width: 100%; border-radius: var(--r-lg); }
.vcard .aactions { margin-top: 22px; }
.vempty { margin-top: 28px; }
/* The action under a no-match message. */
.noresult-act { margin-top: 12px; }
/* The lightbox's buttons. */
.lb-acts { display: flex; gap: 8px; }
/* An empty grouping has no left inset. */
.shelf .empty.small { padding-left: 0; }

/* Tree depth (sidebar and Areas tab): 6 px plus 14 px per level, up to level 8. */
.tree-row[data-depth="0"] { padding-left: 6px; }
.tree-row[data-depth="1"] { padding-left: 20px; }
.tree-row[data-depth="2"] { padding-left: 34px; }
.tree-row[data-depth="3"] { padding-left: 48px; }
.tree-row[data-depth="4"] { padding-left: 62px; }
.tree-row[data-depth="5"] { padding-left: 76px; }
.tree-row[data-depth="6"] { padding-left: 90px; }
.tree-row[data-depth="7"] { padding-left: 104px; }
.tree-row[data-depth="8"] { padding-left: 118px; }

/* The Aa menu's typefaces (font stacks, same as the editor's FONTS). */
.tm-font-sans { font-family: var(--font); }
.tm-font-serif { font-family: Georgia, "Times New Roman", serif; }
.tm-font-mono { font-family: var(--font-mono); }

/* G11 (open): the six text colours and six highlights are raw values until the designer
   names them as tokens. Remove this block when they are in tokens.css. */
.sw-t1 { background: #161B2E; }
.sw-t2 { background: #4338CA; }
.sw-t3 { background: #1D5FB8; }
.sw-t4 { background: #067647; }
.sw-t5 { background: #B45309; }
.sw-t6 { background: #B42318; }
.sw-h1 { background: #FFF4E0; }
.sw-h2 { background: #E4F6EC; }
.sw-h3 { background: #E4F0FD; }
.sw-h4 { background: #EEEAFD; }
.sw-h5 { background: #FDECEB; }
.sw-h6 { background: #F1F3FA; }

/* Focus: every control shows the shared --focus ring (plan §3). Some components set their own
   shadow or hairline, which would hide it, so the ring is restated for each of them. */
.btn:focus-visible, .subcard:focus-visible, .acard:focus-visible, .mcard:focus-visible,
.ftile:focus-visible, .qtile:focus-visible, .sel-box:focus-visible, .kind:focus-visible,
.emoji-grid button:focus-visible, .swatch:focus-visible, .toast button:focus-visible,
.tag-add:focus-visible, .check-row input:focus-visible { box-shadow: var(--focus); }   /* a checkbox has no border to change, and base.css clears the ring on every input */
/* Touch target: the toast's action is 44 px like every other control (tokens --hit). */
.toast button { min-height: var(--hit); }

/* Touch targets (plan §8.3, design guide §7): at least 44 px on touch screens, for every control
   the base sheet sizes smaller. Applies only under a coarse pointer, as the base sheet does. */
@media (pointer: coarse) {
  .btn, .btn-sm, .link-btn, .banner .btn, .bulkbar .btn, .bulkbar .link-btn, .toast button,
  .status-pill .link-btn, .crumb-more { min-height: var(--hit); }
  .crumb-more { min-width: var(--hit); }
  .tree-row .tg { width: var(--hit); }
  .mchip.tagc > button { width: var(--hit); height: var(--hit); margin: -10px -12px -10px 0; }
  .side-empty .link-btn, .seg button { min-height: var(--hit); }
}
/* The dashed "New sub-area" card shows the focus ring too. */
.subcard.new-card:focus-visible { box-shadow: var(--focus) !important; }

/* ---------- Phase 4: the MoM editor ---------- */
/* Editor mount: the loading lines before the note opens. */
.ed-mount[aria-busy="true"] { display: grid; gap: 12px; padding-top: 8px; }
/* Empty note: the hint on the first line (design gap G13: wording to confirm). */
.ed-body p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--text-3); float: left; height: 0; pointer-events: none; }
/* Long text cells show the two-line preview (a decoration); the cell's own text stays in the
   note and opens in the Detailed Remarks drawer. */
.ed-body td.longtext > :not(.remark) { display: none; }
.ed-body td.longtext { cursor: pointer; }
/* The tag field sits in the meta row as a form (Enter adds the tag). */
.inline-form { display: contents; }
/* Picker rows: the kind icon. */
.dest .gi { width: 26px; display: grid; place-items: center; color: var(--accent-strong); flex: none; }
/* Pills for links to workspace files and MoMs (W7): the icon is drawn with a mask in the text
   colour, because the link itself is stored note content. */
.ed-body a.ref::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ed-body a.ref.mom::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
/* An image with no stored width keeps its own size, never wider than the note. */
.ed-body .img img { max-width: 100%; }

/* ---------- Phase 4: Area, Today, All areas, Move ---------- */
/* Page headings: the title sits close under its eyebrow. */
.eyebrow + .h-page { margin-top: 4px; }
.page-head-main { flex: 1; }
.phone-new { margin-top: 16px; }
/* Spacing the prototype set inline. */
.noresult-spaced { margin-top: 20px; }
.empty-spaced { margin-top: 28px; }
.section .empty.small { padding-left: 0; }
/* The restricted gate and "no access" message sit lower on the page. */
.locked-top { margin-top: 56px; }
.locked-plain .art { background: var(--surface-2); color: var(--text-2); }
/* The right-hand end of a row: who added it, and when. */
.row-right { margin-left: auto; padding-left: 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
/* Move picker: each level indents by 18 px. */
.dest[data-depth="0"] { padding-left: 12px; }
.dest[data-depth="1"] { padding-left: 30px; }
.dest[data-depth="2"] { padding-left: 48px; }
.dest[data-depth="3"] { padding-left: 66px; }
.dest[data-depth="4"] { padding-left: 84px; }
.dest[data-depth="5"] { padding-left: 102px; }
.dest[data-depth="6"] { padding-left: 120px; }
/* An area's emoji slot never grows into its neighbours, whatever is stored there. */
.tree-row .nm .em, .dest .em { overflow: hidden; white-space: nowrap; }

/* ---------- Phase 4: Flagged, Recent, Deleted, Account, dialogs ---------- */
.list-spaced { margin-top: 24px; }
.row-trash { padding-right: 200px; }
.cw > .trash-acts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
@media (max-width: 767px) { .emoji-grid { grid-template-columns: repeat(6, 1fr); } }
/* Account page: the name, role and the Appearance and access blocks (from the prototype's inline styles). */
.acct-name { font-size: 17px; display: block; }
.acct-role { margin-top: 8px; }
.acct-h { font-size: 17px; }
.acct-copy { margin-top: 6px; font-size: 14.5px; }
.acct-seg { margin-top: 12px; }
.acct-rule { height: 1px; background: var(--line); margin: 20px 0; }
.acct-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* Dialogs: the fieldset, the kind choice for groupings, the access list, the share link. */
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset .lab { padding: 0; }
.kind-pick { cursor: pointer; }
.access-list { padding: 4px; margin-bottom: 16px; }
.access-row { padding: 8px 12px; }
.share-toggle { min-height: 52px; font-weight: 700; }
.share-link { display: flex; gap: 8px; }
.share-link .input { flex: 1; }
.locked-plain { margin-top: 56px; }
.acct-grid { margin-top: 24px; }
/* Upload dialog: the gap above the name field. */
.up-gap { margin-top: 18px; }

/* Sidebar skeleton: three rows where the area tree will be, while data loads. */
.side-skel { display: grid; gap: 12px; padding: 12px 14px; }
.side-skel .skel { display: block; height: 16px; min-height: 16px; border-radius: 8px; }
.side-skel .skel:nth-child(2) { width: 78%; }
.side-skel .skel:nth-child(3) { width: 56%; }

/* Sign in, Reset, New member (design: auth card). The card's own rules live in base.css. */
.auth .notice { margin-bottom: 16px; }   /* auth card: the notice sits above the fields */
.auth .check-row + .btn-primary { margin-top: 8px; }   /* sign-in only: the submit sits under "Stay signed in"; the reset card has no gap (design) */
.auth-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }   /* new member card: the two actions */
.auth-acts > .btn-primary { flex: 1; }
.auth .foot .link-btn { padding: 0 4px; }   /* auth card: the links line up with the fields' text */

/* Missing page: the actions row. The card and its top margin are .locked and .locked-top. */
.missing-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* A4 export (design: Export as A4 PDF). The dialog, and the note's content on the page. */
.a4-dlg { background: var(--surface); border-radius: var(--r-2xl); padding: 22px; width: min(640px, 100%); }
.a4-dlg .dlg-head { margin-bottom: 12px; }
.a4 .body > *:first-child { margin-top: 0; }
.a4 .body p { margin: 0 0 .6em; }
.a4 .body h1 { font-size: 16px; margin: 12px 0 4px; }
.a4 .body h3, .a4 .body h4 { font-size: 11.5px; margin: 8px 0 3px; }
.a4 .body blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid currentColor; }
.a4 .body pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 9px; }
.a4 .body img { max-width: 100%; height: auto; }
.a4 .body hr { border: 0; border-top: 1px solid currentColor; opacity: .3; }
.a4 .body a { color: inherit; text-decoration: underline; }
@media print {
  .a4 .body tr, .a4 .body img, .a4 .body pre { break-inside: avoid; }
  .a4 .body h1, .a4 .body h2, .a4 .body h3, .a4 .body h4 { break-after: avoid; }
}
/* Print: only the A4 page, flowing from the top of the sheet. The dialog's frame, the app behind it
   and the page background take no space and print no colour. (Anywhere else, printing shows the page.) */
@media print {
  body:not(:has(.print-root)) * { visibility: visible; }
  html, body { background: #fff; }
  body:has(.print-root) .shell, body:has(.print-root) .tabbar, body:has(.print-root) .toasts, body:has(.print-root) .dropzone-overlay, body:has(.print-root) .skip { display: none; }
  body:has(.print-root) #layers, body:has(.print-root) .layer, body:has(.print-root) .layer .panel { position: static; display: block; width: auto; max-width: none; max-height: none; padding: 0; overflow: visible; transform: none; background: none; box-shadow: none; }
  body:has(.print-root) .layer .scrim, .a4-dlg .dlg-head, .a4-dlg .dlg-foot { display: none; }
  .a4-dlg { background: none; padding: 0; width: auto; border-radius: 0; }
  .a4-wrap { background: none; padding: 0; max-height: none; overflow: visible; border-radius: 0; }
  .print-root { position: static; }
}