/* YSM app v3.2 — shared tokens, layout and components.
   Direction: bright, clean, photo-first cards. Near-white page, white cards with a soft shadow, one clear blue for
   action and selection, and a small set of accent colours (teal, rose, violet, amber) used only at key points:
   category icons, tiles, chips, avatars, map marks. Sans only. Glass for the menu, buttons on photos, the viewer bar,
   some overlays and the sign-in screens. Every board links this file from its helmet. */

:root, .y-light {
  /* surfaces */
  --bg: #F1F4F7;          /* page background: near white, a touch cool (white cards sit on it) */
  --surface: #FFFFFF;     /* cards, lists, sheets */
  --fill: #EEF1F5;        /* search fields, segmented track, idle tiles */
  --line: #E3E8ED;        /* separators, hairlines, map land */
  --control: #808C99;     /* input borders, switch off */
  /* text */
  --ink: #1B2530;
  --ink-2: #5B6673;       /* 5.8:1 on white */
  --placeholder: #808C99;
  /* brand: clear blue — primary buttons, selection, progress, map 行った */
  --brand: #3079CF;       /* buttons, links, selection (white text 4.4) */
  --brand-press: #2766B0;
  --brand-soft: #E8F1FC;
  --brand-light: #D3E4F8;
  --brand-vivid: #4A8FDE; /* graphics only: map 行った, rings, bars (no text on it) */
  --on-brand: #FFFFFF;    /* text/icons on a solid brand, accent or status fill (dark theme: dark ink) */
  /* accents (fg = text/icon colour, soft = tinted background, light = stronger tint, vivid = dots, bars, map marks) */
  --teal: #0E7C86;   --teal-soft: #E2F4F4;   --teal-light: #BFE6E6;   --teal-vivid: #19A7A8;
  --rose: #C2384F;   --rose-soft: #FCEBEE;   --rose-light: #F6C9D1;   --rose-vivid: #E8566E;
  --violet: #5B4BC4; --violet-soft: #EEEBFB; --violet-light: #D6D0F5; --violet-vivid: #7B6CE0;
  --amber: #9A5B00;  --amber-soft: #FFF3DC;  --amber-light: #FBDDA6;  --amber-vivid: #F2A93B;
  --slate: #5E6B78;  --slate-soft: #EEF1F4;  --slate-light: #DCE2E8;
  /* status (always with an icon and a word) */
  --ok: #1E7A4C;     --ok-soft: #E3F4EA;     --ok-light: #BFE3CE;
  --warn: #8A5A00;   --warn-soft: #FFF3DC;
  --danger: #C62828; --danger-soft: #FDE8E8; --danger-light: #F5C2C2;
  --on-danger: #FFFFFF;
  /* glass */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(27, 37, 48, 0.05);
  --glass-blur: blur(22px) saturate(1.7);
  /* effects */
  --scrim: rgba(27, 37, 48, 0.32);
  --shadow-card: 0 1px 2px rgba(27, 37, 48, 0.04), 0 6px 20px rgba(27, 37, 48, 0.07);
  --shadow-float: 0 10px 30px rgba(27, 37, 48, 0.14), 0 1px 3px rgba(27, 37, 48, 0.06);
  --shadow-hover: 0 2px 4px rgba(27, 37, 48, 0.05), 0 12px 28px rgba(27, 37, 48, 0.08);
  --track: rgba(27, 37, 48, 0.08);   /* empty part of small bars */
  --hover: rgba(27, 37, 48, 0.04);   /* hover wash on list/menu items */
  --raised: #FFFFFF;                 /* selected segment on the fill track */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* type: one sans family; hierarchy comes from size and weight */
  --font: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-serif: var(--font);
}
/* names that point at other tokens: declared again on .y-app / .y-light so they follow the theme set there */
:root, .y-app, .y-light {
  /* legacy names (sage / sand) map onto the new set */
  --sage: var(--teal); --sage-soft: var(--teal-soft); --sage-light: var(--teal-light);
  --sand: var(--fill); --sand-ink: var(--slate); --sand-light: var(--slate-light);
  /* categories */
  --sight: var(--teal);   --sight-soft: var(--teal-soft);   --sight-light: var(--teal-light);
  --food: var(--rose);    --food-soft: var(--rose-soft);    --food-light: var(--rose-light);
  --stay: var(--violet);  --stay-soft: var(--violet-soft);  --stay-light: var(--violet-light);
  --move: var(--brand);   --move-soft: var(--brand-soft);   --move-light: var(--brand-light);
  --shop: var(--amber);   --shop-soft: var(--amber-soft);   --shop-light: var(--amber-light);
  --other: var(--slate);  --other-soft: var(--slate-soft);  --other-light: var(--slate-light);
}

/* ---------- dark theme ----------
   Light is the default (no attribute). Dark applies when .y-app has data-theme="dark", or sits inside an element with
   data-theme="dark" (unless the .y-app itself says "light"). data-theme="system" follows the device setting.
   Calm near-neutral greys; the same blue family, lifted so text and links stay readable. Photos, photo scrims and
   white text on photos do not change. Keep the two blocks below identical. */
.y-app[data-theme="dark"],
[data-theme="dark"] .y-app:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #141619;
  --surface: #1E2124;
  --fill: #2A2E33;
  --line: #343A40;
  --control: #7E8893;
  --ink: #E9ECEF;
  --ink-2: #A6AFB9;
  --placeholder: #7E8893;
  --brand: #5E9EEA;       /* 5.8:1 on surface */
  --brand-press: #8EBDF3; /* link and selected text: 8.3:1 on surface, 7.3:1 on brand-soft */
  --brand-soft: #1E2B3A;
  --brand-light: #2A405A;
  --brand-vivid: #5E9EEA;
  --on-brand: #0D1824;    /* 6.4:1 on brand */
  --teal: #5CC6C6;   --teal-soft: #18302F;   --teal-light: #21463F;   --teal-vivid: #2FB3B3;
  --rose: #F28597;   --rose-soft: #3A2027;   --rose-light: #573039;   --rose-vivid: #E8667C;
  --violet: #A89EEB; --violet-soft: #28253F; --violet-light: #3A355E; --violet-vivid: #8C7EEA;
  --amber: #EBB05A;  --amber-soft: #352A17;  --amber-light: #4E3C1E;  --amber-vivid: #E9A23A;
  --slate: #A6AFB9;  --slate-soft: #272B30;  --slate-light: #353B42;
  --ok: #63C98F;     --ok-soft: #1A3226;     --ok-light: #24483A;
  --warn: #EBB05A;   --warn-soft: #352A17;
  --danger: #F27A7A; --danger-soft: #3B2022; --danger-light: #5A2E30;
  --on-danger: #1E0C0C;
  --glass: rgba(36, 40, 44, 0.66);
  --glass-strong: rgba(30, 33, 37, 0.88);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.24);
  --scrim: rgba(0, 0, 0, 0.56);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.28);
  --track: rgba(255, 255, 255, 0.10);
  --hover: rgba(255, 255, 255, 0.06);
  --raised: #3A3F45;
}
@media (prefers-color-scheme: dark) {
  .y-app[data-theme="system"],
  [data-theme="system"] .y-app:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141619;
    --surface: #1E2124;
    --fill: #2A2E33;
    --line: #343A40;
    --control: #7E8893;
    --ink: #E9ECEF;
    --ink-2: #A6AFB9;
    --placeholder: #7E8893;
    --brand: #5E9EEA;
    --brand-press: #8EBDF3;
    --brand-soft: #1E2B3A;
    --brand-light: #2A405A;
    --brand-vivid: #5E9EEA;
    --on-brand: #0D1824;
    --teal: #5CC6C6;   --teal-soft: #18302F;   --teal-light: #21463F;   --teal-vivid: #2FB3B3;
    --rose: #F28597;   --rose-soft: #3A2027;   --rose-light: #573039;   --rose-vivid: #E8667C;
    --violet: #A89EEB; --violet-soft: #28253F; --violet-light: #3A355E; --violet-vivid: #8C7EEA;
    --amber: #EBB05A;  --amber-soft: #352A17;  --amber-light: #4E3C1E;  --amber-vivid: #E9A23A;
    --slate: #A6AFB9;  --slate-soft: #272B30;  --slate-light: #353B42;
    --ok: #63C98F;     --ok-soft: #1A3226;     --ok-light: #24483A;
    --warn: #EBB05A;   --warn-soft: #352A17;
    --danger: #F27A7A; --danger-soft: #3B2022; --danger-light: #5A2E30;
    --on-danger: #1E0C0C;
    --glass: rgba(36, 40, 44, 0.66);
    --glass-strong: rgba(30, 33, 37, 0.88);
    --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.24);
    --scrim: rgba(0, 0, 0, 0.56);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.28);
    --track: rgba(255, 255, 255, 0.10);
    --hover: rgba(255, 255, 255, 0.06);
    --raised: #3A3F45;
  }
}
/* .y-light: printed things shown on screen (book pages, calendars) keep the light look in the dark theme */
.y-light { color-scheme: light; }
.y-app[data-theme="dark"] .y-light,
[data-theme="dark"] .y-app:not([data-theme="light"]) .y-light { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .y-app[data-theme="system"] .y-light,
  [data-theme="system"] .y-app:not([data-theme="light"]) .y-light { color: var(--ink); }
}

/* category helpers: put one on an element, then use var(--k), var(--k-soft), var(--k-light), var(--k-vivid) */
.k-sight, .k-sage, .k-teal { --k: var(--teal); --k-soft: var(--teal-soft); --k-light: var(--teal-light); --k-vivid: var(--teal-vivid); }
.k-food, .k-rose { --k: var(--rose); --k-soft: var(--rose-soft); --k-light: var(--rose-light); --k-vivid: var(--rose-vivid); }
.k-stay, .k-violet { --k: var(--violet); --k-soft: var(--violet-soft); --k-light: var(--violet-light); --k-vivid: var(--violet-vivid); }
.k-move, .k-brand, .k-blue { --k: var(--brand); --k-soft: var(--brand-soft); --k-light: var(--brand-light); --k-vivid: var(--brand-vivid); }
.k-shop, .k-amber { --k: var(--amber); --k-soft: var(--amber-soft); --k-light: var(--amber-light); --k-vivid: var(--amber-vivid); }
.k-other, .k-sand, .k-slate { --k: var(--slate); --k-soft: var(--slate-soft); --k-light: var(--slate-light); --k-vivid: var(--slate); }
.k-ok    { --k: var(--ok);    --k-soft: var(--ok-soft);    --k-light: var(--ok-light); --k-vivid: var(--ok); }
.k-warn  { --k: var(--warn);  --k-soft: var(--warn-soft);  --k-light: var(--amber-light); --k-vivid: var(--amber-vivid); }
.k-danger{ --k: var(--danger);--k-soft: var(--danger-soft);--k-light: var(--danger-light); --k-vivid: var(--danger); }

/* base */
body { margin: 0; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
img { display: block; }
.y-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* motion: short and natural; nothing loops */
@keyframes y-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes y-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes y-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes y-bar-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes y-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
.y-app {
  container: app / inline-size;
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  font-feature-settings: 'palt'; letter-spacing: 0.02em; line-break: strict; word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}
/* navigation slot: phone = floating glass tab bar, tablet = glass rail, PC = glass sidebar */
.y-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 6; pointer-events: none; }
.y-nav > * { pointer-events: auto; }
.y-nav--side { display: none; }               /* pushed screens: no tab bar on phone */
.y-main {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow-y: auto; box-sizing: border-box;
  padding: 54px 0 40px;
}
.y-main--tabs { padding-bottom: 116px; }      /* phone: content can scroll under the glass bar */
.y-main--bar { padding-bottom: 136px; }
.y-main--tabs.y-main--fab { padding-bottom: 184px; }
.y-page { box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto; animation: y-fade .24s ease both; }
.y-narrow { box-sizing: border-box; width: 100%; max-width: 680px; margin: 0 auto; }
.y-read { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; }

/* responsive helpers (they only hide; the element keeps its own display) */
@container app (max-width: 599px) { .hide-phone { display: none !important; } }
@container app (min-width: 600px) { .only-phone { display: none !important; } }
@container app (max-width: 839px) { .only-desk { display: none !important; } }
@container app (min-width: 840px) { .hide-desk { display: none !important; } }
@container app (max-width: 1199px) { .only-pc { display: none !important; } }

@container app (min-width: 600px) {
  .y-nav, .y-nav--side { display: block; top: 12px; bottom: 12px; left: 12px; right: auto; width: 80px; height: auto; }
  .y-main { left: 104px; padding-top: 28px; padding-bottom: 48px; }
  .y-main--tabs, .y-main--tabs.y-main--fab { padding-bottom: 48px; }
  .y-main--bar { padding-bottom: 124px; }
  .y-app--focus .y-main { left: 0; }
  .y-page { padding: 0 24px; }
}
@container app (min-width: 840px) {
  .y-nav, .y-nav--side { width: 244px; }
  .y-main { left: 268px; }
  .y-app--focus .y-main { left: 0; }
  .y-page { padding: 0 32px; }
}
@container app (min-width: 1200px) { .y-page { padding: 0 48px; } }

/* ---------- layout blocks ---------- */
.y-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.y-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.y-photos > * { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; }
.y-split { display: block; }
.y-split__aside { min-width: 0; }
.y-split__main { min-width: 0; }
.y-hscroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 0 20px; margin: 0; list-style: none; scroll-snap-type: x proximity; }
.y-hscroll > * { flex-shrink: 0; scroll-snap-align: start; }

@container app (min-width: 600px) {
  .y-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
  .y-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .y-hscroll--wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; padding: 0 20px; }
}
@container app (min-width: 840px) {
  .y-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
  .y-split--wide-aside { grid-template-columns: minmax(0, 1fr) 380px; }
  .y-split__sticky { position: sticky; top: 0; }
}

/* ---------- type ---------- */
.y-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 0 20px; }
.y-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.01em; }
.y-display { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: 0.01em; }
.y-eyebrow { margin: 0; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.y-navbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 112px; align-items: center; min-height: 44px; padding: 0 4px; }
.y-navbar__title { margin: 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; font-size: 16px; font-weight: 500; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.y-h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.y-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 20px 12px; }
.y-grouphead { margin: 26px 20px 8px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-2); }
.y-meta { font-size: 12px; line-height: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.y-sub { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.y-num { font-variant-numeric: tabular-nums; }
.y-big { font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
@container app (min-width: 840px) {
  .y-title { font-size: 28px; line-height: 36px; }
  .y-display { font-size: 34px; line-height: 44px; }
  .y-header { padding: 16px 0 0; }
  .y-navbar { padding: 8px 0 0; }
}

/* ---------- buttons ---------- */
.y-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; height: 48px; padding: 0 22px;
  border: 0; border-radius: 14px; cursor: pointer;
  font-size: 15px; line-height: 1; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: transform .12s var(--ease), background-color .16s ease, box-shadow .16s ease;
}
.y-btn:active { transform: scale(0.98); }
.y-btn--primary { background: var(--brand); color: var(--on-brand); }
.y-btn--primary:active { background: var(--brand-press); }
.y-btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.y-btn--tonal { background: var(--brand-soft); color: var(--brand-press); }
.y-btn--quiet { background: var(--fill); color: var(--ink); }
.y-btn--danger { background: var(--danger); color: var(--on-danger); }
.y-btn--danger-text { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 1px var(--line); }
.y-btn--block { display: flex; width: 100%; }
.y-btn--sm { height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.y-btn:disabled, .y-btn[aria-disabled="true"] { background: var(--fill); color: var(--ink-2); box-shadow: none; cursor: default; transform: none; }
.y-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-press); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--brand); }
.y-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--ink); cursor: pointer; transition: transform .12s var(--ease), background-color .16s ease; }
.y-iconbtn:active { transform: scale(0.94); }
.y-iconbtn--on-surface { background: var(--surface); box-shadow: var(--shadow-card); }
.y-iconbtn--fill { background: var(--fill); }
.y-iconbtn--brand { background: var(--brand); color: var(--on-brand); }
/* floating add button (phone only) */
.y-fab { position: absolute; right: 18px; bottom: 108px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 52px; box-sizing: border-box; padding: 0 20px 0 16px; border: 0; border-radius: 26px; background: var(--brand); color: var(--on-brand); font-size: 15px; font-weight: 600; box-shadow: var(--shadow-float); cursor: pointer; transition: transform .12s var(--ease); }
.y-fab:active { transform: scale(0.97); }
@container app (min-width: 600px) { .y-fab { display: none; } }

/* ---------- glass (menu, buttons on photos, viewer bar, some overlays only) ---------- */
.y-glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-float); }
.y-glass-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); cursor: pointer; transition: transform .12s var(--ease); }
.y-glass-btn:active { transform: scale(0.94); }
.y-glass-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
/* photo viewer: glass control bar floating over the photo */
.y-viewerbar { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-float); animation: y-bar-rise .24s var(--ease) both; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .y-glass, .y-glass-btn, .y-glass-pill, .y-viewerbar, .y-tabbar, .y-rail, .y-sidebar { background: var(--glass-strong); }
}

/* ---------- cards and lists ---------- */
.y-card { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s var(--ease), box-shadow .2s ease; }
a.y-card:active, .y-card > a:active { transform: scale(0.99); }
@media (hover: hover) { a.y-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } }
.y-card__body { padding: 16px 18px 18px; }
.y-pad { padding: 18px; }
.y-list { list-style: none; margin: 0 16px; padding: 0; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.y-list > li + li { border-top: 1px solid var(--line); }
.y-row { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 8px 16px; border: 0; background: transparent; text-align: left; font-size: 15px; line-height: 22px; color: var(--ink); cursor: pointer; }
.y-row__main { flex: 1; min-width: 0; }
.y-row__value { flex-shrink: 0; font-size: 14px; color: var(--ink-2); }
.y-chev { flex-shrink: 0; color: var(--control); }
.y-photo { width: 100%; object-fit: cover; border-radius: 16px; }
.y-cover { width: 100%; height: 220px; object-fit: cover; }
/* label on a photo: glass pill */
.y-onphoto { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); color: var(--ink); font-size: 12px; font-weight: 600; }

/* ---------- stat tiles (one look everywhere: home, account, album, plan, life list, diary) ----------
   <div class="y-stats"><a class="y-stat"><b class="y-stat__num">214</b><span class="y-stat__label">枚</span></a>…</div>
   Every tile is the same colour (soft blue tile, blue number). */
.y-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.y-stat { --s: var(--brand); --s-soft: var(--brand-soft); --s-vivid: var(--brand-vivid); display: flex; flex-direction: column; justify-content: center; gap: 2px; box-sizing: border-box; min-width: 0; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--s-soft); color: var(--ink); text-align: left; font: inherit; text-decoration: none; }
.y-stat__num { display: block; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--s); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-stat__num small { font-size: 13px; font-weight: 600; }
/* numbers are never shortened (no 万): long ones get one step smaller, very long ones take two tiles */
.y-stat__num.is-long { font-size: 16px; }
.y-stat--wide { grid-column: span 2; }
.y-stat__label { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-stat__bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.y-stat__bar > span { display: block; height: 100%; border-radius: 2px; background: var(--s-vivid); }
a.y-stat, button.y-stat { cursor: pointer; transition: transform .12s var(--ease); }
a.y-stat:active, button.y-stat:active { transform: scale(0.98); }

/* photo text: white words on a photo with a bottom scrim (put .y-photoscrim on the photo's box) */
.y-photoscrim { position: relative; }
.y-photoscrim::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0) 58%); }
.y-ontext { position: absolute; z-index: 1; color: #FFFFFF; }

/* ---------- small pieces ---------- */
/* tile: tinted block, ink text. Use with .k-teal / .k-rose / .k-violet / .k-amber / .k-blue */
.y-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; box-sizing: border-box; min-height: 92px; padding: 14px; border-radius: 18px; background: var(--k-soft); color: var(--ink); text-decoration: none; transition: transform .12s var(--ease); }
.y-tile:active { transform: scale(0.98); }
.y-tile__label { font-size: 14px; line-height: 20px; font-weight: 600; }
.y-tile--soft { background: var(--k-soft); }
/* icon: line icon in a soft circle/square. Use with .k-* (default blue) */
.y-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--k-soft, var(--brand-soft)); color: var(--k, var(--brand)); }
.y-icon--sm { width: 32px; height: 32px; border-radius: 10px; }
.y-icon--lg { width: 56px; height: 56px; border-radius: 16px; }
.y-icon--round { border-radius: 50%; }
.y-icon--soft { background: var(--k-soft); color: var(--k); }
.y-icon--solid { background: var(--k, var(--brand)); color: var(--on-brand); }
/* tag: word on a soft tint (k-* sets the tint); kind label: neutral pill with a coloured dot */
.y-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--k-soft, var(--fill)); color: var(--k, var(--ink)); font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap; }
.y-kind { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--sand); color: var(--ink); font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap; }
.y-kind::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--k-vivid, var(--k, var(--slate))); }
.y-kind--nodot::before { display: none; }
.y-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font-size: 11px; line-height: 1; font-weight: 700; }
.y-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--k-soft, var(--brand-soft)); color: var(--ink); font-size: 13px; line-height: 20px; }
.y-note > svg { flex-shrink: 0; margin-top: 0; color: var(--k, var(--brand)); }
.y-progress { height: 6px; border-radius: 3px; background: var(--sand); overflow: hidden; }
.y-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--brand-vivid); transition: width .4s var(--ease); }
.y-divider { height: 1px; border: 0; margin: 0; background: var(--line); }
/* avatar (set background inline from the person colours) */
.y-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.y-avatar--sm { width: 26px; height: 26px; font-size: 12px; border: 2px solid var(--surface); }
.y-avatar--sm + .y-avatar--sm { margin-left: -7px; }

/* ---------- controls ---------- */
.y-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 20px; }
.y-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; box-sizing: border-box; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.y-chip[aria-pressed="true"], .y-chip[aria-selected="true"], .y-chip.is-on { background: var(--brand); box-shadow: none; color: var(--on-brand); font-weight: 600; }
.y-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border-radius: 14px; background: var(--fill); }
.y-seg > button { height: 36px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.y-seg > button[aria-pressed="true"], .y-seg > button[aria-selected="true"] { background: var(--raised); box-shadow: 0 1px 3px rgba(27, 37, 48, 0.10); font-weight: 600; color: var(--brand-press); }
.y-field { display: block; }
.y-label { display: block; margin-bottom: 6px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.y-input { display: block; box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--control); border-radius: 14px; background: var(--surface); font-size: 16px; color: var(--ink); }
.y-textarea { display: block; box-sizing: border-box; width: 100%; min-height: 104px; padding: 12px 14px; border: 1px solid var(--control); border-radius: 14px; background: var(--surface); font-size: 16px; line-height: 26px; color: var(--ink); resize: vertical; }
.y-search { position: relative; }
.y-search > input { display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px 0 42px; border: 0; border-radius: 22px; background: var(--fill); font-size: 16px; color: var(--ink); }
.y-search > svg { position: absolute; left: 14px; top: 12px; color: var(--ink-2); pointer-events: none; }
.y-error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--danger); }
.y-switch { position: relative; flex-shrink: 0; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.y-switch::before { content: ''; position: absolute; top: 9px; left: 0; box-sizing: border-box; width: 50px; height: 28px; border-radius: 14px; border: 1.5px solid var(--control); background: var(--surface); transition: background-color .18s ease, border-color .18s ease; }
.y-switch > span { position: absolute; top: 16px; left: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--control); transition: left .18s var(--ease), width .18s var(--ease), height .18s var(--ease), top .18s var(--ease); }
.y-switch[aria-checked="true"]::before { border-color: var(--brand); background: var(--brand); }
.y-switch[aria-checked="true"] > span { top: 13px; left: 26px; width: 20px; height: 20px; background: var(--on-brand); }
.y-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--control); background: var(--surface); color: var(--on-brand); transition: background-color .16s ease; }
.y-check[aria-checked="true"], .y-check.is-on { border-color: var(--brand); background: var(--brand); }

/* ---------- overlays ---------- */
.y-scrim { position: absolute; inset: 0; z-index: 20; background: var(--scrim); animation: y-fade .2s ease both; }
.y-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; box-sizing: border-box; max-height: calc(100% - 48px); overflow-y: auto; padding: 8px 18px 34px; background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-float); animation: y-sheet-up .28s var(--ease) both; }
.y-sheet--glass { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.y-sheet__grab { display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--line); }
.y-sheet__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.y-sheet__title { margin: 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; }
@container app (min-width: 600px) {
  .y-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 48px)); max-height: calc(100% - 96px); padding: 18px 26px 26px; border-radius: 24px; animation: y-pop .24s var(--ease) both; }
  .y-sheet__grab { display: none; }
  .y-sheet--wide { width: min(760px, calc(100% - 48px)); }
}
.y-actionbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; box-sizing: border-box; padding: 12px 16px 34px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 -1px 0 var(--line); }
.y-actionbar__in { display: flex; flex-direction: column; gap: 10px; }
@container app (min-width: 600px) {
  .y-actionbar { left: 104px; right: 12px; bottom: 12px; padding: 12px 20px; border-radius: 22px; box-shadow: var(--glass-edge), var(--shadow-float); }
  .y-app--focus .y-actionbar { left: 12px; }
  .y-actionbar__in { flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px; max-width: 1100px; margin: 0 auto; }
  .y-actionbar__in > .y-btn--block { width: auto; min-width: 240px; }
}
@container app (min-width: 840px) { .y-actionbar { left: 268px; } .y-app--focus .y-actionbar { left: 12px; } }
.y-snack { position: absolute; left: 16px; right: 16px; bottom: 108px; z-index: 22; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; box-sizing: border-box; padding: 0 8px 0 16px; border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-float); color: var(--ink); font-size: 14px; font-weight: 500; animation: y-rise .22s var(--ease) both; }
.y-snack > button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--brand-press); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.y-snack--nobar { bottom: 24px; }
.y-snack--overbar { bottom: 128px; }
@container app (min-width: 600px) { .y-snack, .y-snack--nobar { left: auto; right: 24px; bottom: 24px; width: 420px; } .y-snack--overbar { left: auto; right: 24px; bottom: 104px; width: 420px; } }

.y-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px; }
.y-empty__title { margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.y-empty__text { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-2); }

/* ---------- navigation (TabBar.dc.html): glass ---------- */
.y-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-sizing: border-box; height: 64px; margin: 10px 14px 22px; padding: 0 6px; border-radius: 32px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-float); }
.y-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--ink-2); font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.02em; transition: color .16s ease; }
.y-tab__pill { display: flex; align-items: center; justify-content: center; width: 44px; height: 28px; border-radius: 14px; transition: background-color .16s ease; }
.y-tab[aria-current="page"] { color: var(--brand-press); font-weight: 600; }
.y-tab[aria-current="page"] .y-tab__pill { color: var(--brand); background: var(--brand-soft); }
.y-rail, .y-sidebar { display: none; }
@container app (min-width: 600px) {
  .y-tabbar { display: none; }
  .y-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; box-sizing: border-box; height: 100%; padding: 18px 0 16px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-card); }
  .y-rail .y-tab { width: 100%; min-height: 62px; font-size: 11px; }
}
@container app (min-width: 840px) {
  .y-rail { display: none; }
  .y-sidebar { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: 22px 14px 16px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-card); overflow-y: auto; }
}
.y-side__item { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 44px; padding: 0 12px; border-radius: 14px; color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color .16s ease; }
.y-side__item:hover { background: var(--hover); }
.y-side__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-press); font-weight: 600; }
.y-side__item[aria-current="page"] svg { color: var(--brand); }
.y-side__head { margin: 22px 12px 6px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-2); }