/* shared.css: what tasks and canvas draw the same way. Edit this file, shared/shared.css at the project root, never
   the copies: dev.sh and deploy.sh (tasks' and canvas's) run shared/sync.sh first, which copies it and logo.woff2 into
   public/ and canvas/public/. Each app loads it before its own app.css and supplies the colour and type tokens it
   uses (--ink, --muted, --faint, --hover, --ui, --ease, --fast, --mid). (2026-09-23) */

:root { --switch-on: #ffffff; }
:root[data-theme="dark"] { --switch-on: #2c2c2c; }

/* ---------- the logo: 搞掂晒 ---------- */
/* Chiron GoRound TC Black (SIL Open Font License), cut down to just these three characters (2 KB), so it loads with the
   page and needs nothing from elsewhere. */
@font-face { font-family: 'gaudims logo'; font-weight: 900; font-display: block; src: url(logo.woff2) format('woff2'); unicode-range: U+6382, U+641E, U+6652; }
.wordmark.logo { font-family: 'gaudims logo', var(--ui); font-weight: 900; letter-spacing: -0.03em; line-height: 1; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Which app this is, under the characters: spaced capitals in the UI sans. */
.wordmark.logo .logo-sub { font: 500 14px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-right: -.3em; }
.wordmark.logo.small .logo-sub { font-size: 13px; letter-spacing: .28em; }
.gate .wordmark.logo { align-items: center; }
.wordmark.logo.small { font-size: 30px; }

/* ---------- tasks | canvas switch ----------
   Under the logo in both apps' sidebars (and compact in an open canvas's top bar and the tasks phone bar): the app
   you're in sits on white. */
/* Every tab control in both apps (this switch, list | flow | timeline, the flow's modes, light | dark) is the same:
   a grey track, 8px corners; the current tab white (--switch-on), 6px corners. */
.app-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 8px; background: var(--hover); }
.app-switch a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font: 500 13px/1.2 var(--ui); color: var(--muted); text-decoration: none; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.app-switch a::after { display: none; }
.app-switch a .ic { width: 15px; height: 15px; margin: 0; }
.app-switch a:hover, .app-switch a:focus-visible { color: var(--ink); outline: none; }
.app-switch a.on { background: var(--switch-on); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.app-switch.compact { display: inline-grid; padding: 2px; align-self: center; }
.app-switch.compact a { padding: 3px 9px; font-size: 12px; }

/* ---------- the sidebar (2026-09-23) ----------
   The same in both apps: the logo with the light/dark disc and the gear, you, the tasks | canvas switch, a "new"
   button, then the rows. Every box (the switch, the button, a row's highlight, your row) sits --side-edge in from each
   side, and the text inside sits --side-pad further in, the logo's too, so everything lines up. Three text sizes: 15 for
   rows, 13 for controls and your name, 11 for counts and small print. */
:root { --sidebar-w: 256px; --side-edge: 16px; --side-pad: 12px; }
/* all and standalone (tasks), boards (canvas): views, not areas, so a quiet slate blue with their icons. */
:root { --view-row: color-mix(in srgb, #2c5686 70%, var(--ink)); }
:root[data-theme="dark"] { --view-row: color-mix(in srgb, #a2c6ec 70%, var(--ink)); }
.sidebar { display: flex; flex-direction: column; box-shadow: inset -1px 0 var(--faint); height: 100vh; position: sticky; top: 0; }
.sidebar-top { display: flex; flex-direction: column; gap: 20px; padding: 26px var(--side-edge) 8px; }
.sidebar-head { display: flex; align-items: center; gap: 2px; padding-left: var(--side-pad); font-size: 13px; }
.sidebar-head .wordmark { margin-right: auto; }
.sidebar-head .ib { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -6px 0; padding: 0; border-radius: 6px; color: var(--muted); }
.sidebar-head .ib::after { display: none; }
.sidebar-head .ib:hover, .sidebar-head .ib:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.sidebar-head .ib .ic { width: 16px; height: 16px; }
.sidebar-head button.theme { width: 15px; height: 15px; margin: 0 7px; }
/* You: an initial in a disc, your name, and the small print under it. On tasks the row opens Settings. */
.sidebar-top .me-row { display: flex; align-items: center; gap: 10px; margin: -2px 0 -4px; padding: 8px var(--side-pad); border-radius: 6px; color: var(--ink); text-align: left; max-width: 100%; }  /* two classes: tasks' row is also a .link */
button.me-row { border: 0; background: none; font: inherit; cursor: pointer; transition: background-color var(--fast) var(--ease); }
button.me-row:hover, button.me-row:focus-visible { background: var(--hover); color: var(--ink); outline: none; }
.me-row::after { display: none; }
.me-row .avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 12px/1 var(--ui); }
.me-row .me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-row .me-name { font: 500 13px/1.2 var(--ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-row .me-sub { font: 11px/1.2 var(--ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { flex: 1; overflow-y: auto; padding: 16px var(--side-edge) 20px; }
/* "new area" / "new board": outlined; white is kept for "you're here" in the switch. */
.new-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; margin: 0 0 20px; padding: 0 10px;
  border: 1px solid var(--faint); border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px/1.2 var(--ui); cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.new-btn .ic { width: 15px; height: 15px; }
.new-btn:hover, .new-btn:focus-visible { background: var(--hover); outline: none; }
.nav-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; position: relative;
  width: 100%; text-align: left; padding: 8px var(--side-pad); border: 0; border-radius: 6px; background: none; color: var(--ink);
  font: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-row + .nav-row { margin-top: 2px; }
.nav-row:hover, .nav-row.on { background: var(--hover); }
.nav-row::after { display: none; }
.nav-row .t { font-family: var(--text, var(--ui)); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row .t .ic { width: 14px; height: 14px; margin: 0 8px 0 0; vertical-align: -2px; color: var(--muted); }
.nav-row .n { font: 11px/1 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-row.view .t, .nav-row.view .t .ic { color: var(--view-row); }
/* A heading inside the rows, where one is still needed (tasks: "shared with me"): small capitals, no icon, no line. */
.nav-head { display: flex; align-items: center; gap: 6px; font: 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 22px var(--side-pad) 10px; }
.nav-head .n { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- the light/dark disc ----------
   Beside the gear at the top of both sidebars, and in an open canvas's toolbar. */
button.theme {
  width: 14px; height: 14px; padding: 0; margin: 0 4px; border-radius: 50%;
  color: var(--muted); border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  cursor: pointer; align-self: center; position: relative; flex-shrink: 0;
  transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}
button.theme.dark { transform: rotate(180deg); }
button.theme:hover, button.theme:focus-visible { color: var(--ink); outline: none; }

/* ---------- two- and three-part switches (.seg) ----------
   list | flow | timeline, the flow's modes, and in Settings light | dark, off | on: a grey track, the current part
   white, 8px and 6px corners, like the tasks | canvas switch. */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--hover); }
.seg button.toggle { padding: 4px 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 400 13px/1.3 var(--ui); cursor: pointer; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg button.toggle::after { display: none; }
.seg button.toggle:hover, .seg button.toggle:focus-visible { color: var(--ink); outline: none; }
.seg button.toggle.on { background: var(--switch-on); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ---------- Settings (2026-09-23) ----------
   The same popup in tasks and canvas, on the sidebar's rules: a heading row with a close button, then sections
   spaced apart without lines, each under an 11px capital label. Rows 15px, controls 13px, small print 11px. A choice
   is a switch (.seg), an action a text link, a place to go a row like the sidebar's (.set-link), something new the
   outlined button of "new area" (.set-btn), a fold the chevron of "saved for later" (.set-fold). */
dialog.settings { padding: 0; width: min(520px, 94vw); }
.settings-head { display: flex; align-items: center; gap: 8px; padding: 22px 24px 4px; position: sticky; top: 0; z-index: 1; background: var(--bg); }
.settings-head h2 { margin: 0; font: 500 20px/1.2 var(--ui); letter-spacing: -.01em; }
.settings-head .ib { margin: -6px -8px -6px 0; }
.settings-body { padding: 0 24px 26px; max-height: min(78vh, 760px); overflow: auto; }
.set-sec { padding-top: 22px; }
.set-sec > h3, .set-sec-head h3 { margin: 0 0 8px; font: 400 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.set-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.set-sec-head h3 { margin: 0; }
.set-row { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 6px 0; }
.set-row input[type="text"] { flex: 1; min-width: 0; }
.set-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.25; color: var(--ink); }
.set-fine { font-size: 11px; line-height: 1.4; color: var(--muted); }
p.set-fine { margin: 0 0 6px; }
.set-row .link, .set-me .link { font-size: 13px; }
/* You: the sidebar's row, with sign out, the one red thing in Settings. */
.me-row.set-me { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; }
.set-me .set-signout { margin-left: auto; color: var(--late, #b8473a); }
.set-me .set-signout:hover, .set-me .set-signout:focus-visible { color: var(--late, #b8473a); text-decoration: underline; text-underline-offset: 3px; }
/* A place to go (sharing, the calendar feed, recent changes, export): a row like the sidebar's. */
.set-link {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 24px); margin: 0 -12px; padding: 9px 12px;
  border: 0; border-radius: 6px; background: none; color: var(--ink); font: 15px/1.3 var(--text, var(--ui)); text-align: left;
  text-decoration: none; cursor: pointer; transition: background-color var(--fast) var(--ease);
}
.set-link + .set-link { margin-top: 2px; }
.set-link:hover, .set-link:focus-visible { background: var(--hover); color: var(--ink); outline: none; }
.set-link::after { display: none; }
.set-link .ic { width: 14px; height: 14px; margin: 0; color: var(--muted); flex: 0 0 auto; }
.set-link .set-fine { margin-left: auto; }
/* Something new (a token): the outlined button of "new area". */
.set-btn { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--faint); border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px/1 var(--ui); cursor: pointer; transition: background-color var(--fast) var(--ease); }
.set-btn:hover, .set-btn:focus-visible { background: var(--hover); outline: none; }
/* A fold (change password, keyboard shortcuts): the chevron of "saved for later". */
.set-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 36px; width: max-content; list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: currentColor; transition: transform var(--fast) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5 10 8l-3.5 3.5'/%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 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.5 10 8l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.set-fold[open] > summary::before { transform: rotate(90deg); }
.set-fold > summary:hover { color: var(--ink); }
.set-fold[open] > summary { margin-bottom: 8px; }
/* A fold that is a whole section (keyboard shortcuts): its summary reads as the section's label. */
.set-fold-head > summary { min-height: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .settings-head, .settings-body { padding-left: 20px; padding-right: 20px; } }

/* ---------- the custom cursor (shared/cursor.js; mouse and trackpad only; the same in both apps) ---------- */

html.custom-cursor:not(.cursor-native), html.custom-cursor:not(.cursor-native) * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none;
  border-radius: 50%; will-change: transform; transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--fast) var(--ease);
}
.cursor-dot { width: 4.5px; height: 4.5px; background: var(--ink); }
.cursor-ring {
  width: 19.5px; height: 19.5px; border: 1px solid var(--ink); opacity: 1;
  transition: opacity var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cursor-ring.active { border-color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cursor-ring.pressed { background: color-mix(in srgb, var(--ink) 14%, transparent); }
html.cursor-native .cursor-dot, html.cursor-native .cursor-ring { opacity: 0 !important; }