/* Historical character on the current shared controls and Journal reader. */
[data-skin="keepsake"], .journal-app[data-skin="keepsake"], .decks-app[data-skin="keepsake"] {
 --ss-font-ui: var(--ss-font-reading);
 --ss-font-display: var(--ss-font-retro);
 --ss-color-accent: var(--ss-color-pink-strong);
 --ss-color-accent-soft: var(--ss-color-pink-soft);
 --ss-color-on-accent: var(--ss-role-on-selected);
 --ui-primary-background: var(--ss-role-primary);
 --ui-primary-color: var(--ss-role-on-selected);
 --ui-primary-border: var(--ss-role-primary-edge);
 /* A disabled control (primitives.css): muted ink on paper in a soft frame. */
 --ss-disabled-face: var(--ss-color-paper);
 --ss-disabled-ink: var(--ss-color-ink-soft);
 --ss-disabled-outline: var(--ss-color-border-soft);
 --ui-selected-background: var(--ss-role-selected);
 --ui-selected-color: var(--ss-role-on-selected);
 --ui-selected-border: var(--ss-role-selected-edge);
 --ss-radius-panel: 5px;
 --ss-radius-button: 1px;
 --ss-control-shadow-soft: var(--ss-button-shadow-hard);
 --ss-tab-raised-frame: var(--ss-language-tab-frame);
 --ss-tab-raised-shadow: var(--ss-language-tab-shadow);
 --ss-tab-raised-shadow-active: var(--ss-control-shadow-soft);
 --ss-panel-outline: 1px solid var(--ss-color-tan-border-soft);
 --ss-panel-shadow-soft: none;
 /* Colour roles (see tokens.css): pink is you, lavender is the app answering and the study material. */
 --ss-role-selected: var(--ss-color-pink);
 --ss-role-on-selected: var(--ss-color-ink);
 --ss-role-selected-edge: var(--ss-color-pink-strong);
 --ss-role-selected-soft: var(--ss-color-pink-soft);
 --ss-role-primary: var(--ss-color-pink);
 --ss-role-primary-edge: var(--ss-color-pink-strong);
 --ss-role-star: var(--ss-color-pink-strong);
 --ss-role-highlight: var(--ss-color-pink-soft);
 --ss-role-pressed-glyph: var(--ss-color-pink-strong);
 --ss-role-hover: color-mix(in srgb, var(--ss-color-purple-soft) 50%, var(--ss-color-paper));
 --ss-role-hover-edge: var(--ss-color-purple-dark);
 --ss-role-focus: var(--ss-color-purple-dark);
 --ss-role-progress-done: var(--ss-color-purple);
 --ss-role-progress-current: var(--ss-color-pink-strong);
 --ss-role-tag: var(--ss-color-purple-soft);
 --ss-role-tag-ink: var(--ss-color-purple-dark);
 --ss-role-notice: color-mix(in srgb, var(--ss-color-purple-soft) 60%, var(--ss-color-paper));
 --ss-role-notice-edge: var(--ss-color-purple);
 --ss-role-study-card: var(--ss-color-purple-soft);
 --ss-role-study-card-edge: var(--ss-color-purple-dark);
 --ss-role-study-card-ink: var(--ss-color-ink);
 --ss-role-right: var(--ss-color-green-soft);
 --ss-role-right-edge: var(--ss-color-green-strong);
 --ss-role-wrong: color-mix(in srgb, var(--ss-role-destructive) 18%, var(--ss-color-paper)); /* wrong is brick, as every error (house style, 17 Oct) */
 --ss-role-wrong-edge: var(--ss-role-destructive);
 --ss-role-accent: var(--ss-color-pink);
 /* The answer look (tokens.css): flat, a 1px edge on paper, right and wrong from the roles. */
 --ss-answer-right-ink: var(--ss-role-right-edge);
 --ss-answer-right-edge: var(--ss-role-right-edge);
 --ss-answer-right-paper: var(--ss-role-right);
 --ss-answer-wrong-ink: var(--ss-role-wrong-edge);
 --ss-answer-wrong-edge: var(--ss-role-wrong-edge);
 --ss-answer-wrong-paper: var(--ss-color-paper);
 --ss-answer-box-edge: var(--ss-color-tan-border-soft);
 --ss-answer-box-paper: var(--ss-color-paper);
 --ss-answer-edge-width: 1px;
 --ss-answer-radius: var(--ss-radius-md);
 --ss-answer-bevel: none;
 --ss-focus-control: var(--ss-role-focus);
 --ss-focus-edit-border: var(--ss-role-focus);
 --ss-focus-caret: var(--ss-role-focus);
}
/* A sliced pixel rim keeps its corner steps at any window size without clipping
   the window's resize handles, focus outlines or client content. */
[data-skin="keepsake"] .ui-window {
 border: 6px solid transparent;
 border-image: url("./keepsake-frame.svg") 6 / 6px / 0 stretch;
 border-radius: 0;
 background-clip: padding-box;
 box-shadow: none;
 filter: drop-shadow(3px 3px 0 rgba(73,51,48,.35));
}
[data-skin="keepsake"] .ui-titlebar {
 border: 1px solid transparent;
 border-bottom-color: var(--ss-color-purple-dark);
 background: linear-gradient(90deg,var(--ss-color-purple-dark),var(--ss-color-purple));
 box-shadow: none;
 font-family: var(--ss-font-window-title);
 text-shadow: 1px 1px 0 var(--ss-titlebar-bevel-shade);
}
[data-skin="keepsake"] [data-skin="room"] .ui-workspace-titlebar { font-family: var(--ss-font-retro); }
[data-skin="keepsake"] .ui-workspace-window:not(.is-focused) .ui-workspace-titlebar {
 background: var(--ss-color-purple-soft);
 color: var(--ss-color-ink);
 box-shadow: none;
 text-shadow: none;
}
[data-skin="keepsake"] .ui-workspace-controls button {
 border: 1px solid var(--ss-window-outline);
 border-radius: 1px;
 box-shadow: var(--ss-button-shadow-hard);
}
/* The window in front sits higher (D012: plum in front, warm tan behind): a soft shadow falls under it as well as the
   pixel one, so it reads as lifted over the others. */
@media (min-width: 721px) and (orientation: landscape) {
 [data-skin="keepsake"][data-palette] .ui-workspace-window.is-focused:not(.is-maximized) { filter: drop-shadow(3px 3px 0 var(--ss-window-drop, rgba(73,51,48,.35))) drop-shadow(0 16px 18px rgba(42,31,34,.32)); }
}
[data-skin="keepsake"] .ui-workspace-window.is-maximized { filter: none; }
[data-skin="keepsake"] .ui-zone-tab,
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .language-tabs button,
[data-skin="clean"] .ui-zone-tab {
 border-color: var(--ss-tab-raised-frame);
 box-shadow: var(--ss-tab-raised-shadow);
}
[data-skin="keepsake"] .ui-zone-tab[aria-pressed="true"] { box-shadow: var(--ss-tab-raised-shadow-active); }
@media (max-width:720px), (orientation:portrait) {
 [data-skin="keepsake"] .ui-workspace-window { filter: none; }
}
.journal-app[data-skin="keepsake"] { --ss-font-ui: var(--ss-font-chrome); --ss-font-display: var(--ss-font-chrome); --font-ui: var(--ss-font-chrome); --font-display: var(--ss-font-chrome); --font-study-japanese: var(--ss-font-jp); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-ui-settings],
:is([data-skin="keepsake"], [data-skin="clean"]) #pocket-study-settings-dialog { --ss-font-ui: var(--ss-font-chrome); --ss-font-pixel: var(--ss-font-chrome); font-family: var(--ss-font-chrome); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-ui-settings] :is(.ui-settings-header p, .ui-settings-row__copy small, .ui-settings-info),
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-ui-settings] [data-settings-section]:not([data-settings-section="controls"]) .ui-settings-section__description,
:is([data-skin="keepsake"], [data-skin="clean"]) #pocket-study-settings-dialog :is(.ui-settings-header p, .ui-settings-section__description, .ui-settings-row__copy small, .ui-settings-info) { font-family: var(--ss-font-chrome); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-module-panel { padding: 16px; gap: 16px; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations { width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; }
@media (hover: hover) { :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations :is(.journal-mailbox-trigger,.ui-settings-trigger):hover:not(:disabled):not([aria-expanded="true"]) { border-color: var(--ss-role-hover-edge); background: var(--ss-role-hover); } }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations :is(.journal-mailbox-trigger,.ui-settings-trigger)[aria-expanded="true"] { color: var(--ss-role-on-selected, var(--ss-color-ink)); border-color: var(--ss-role-selected-edge); background: var(--ss-role-selected); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations :is(.journal-mailbox-trigger,.ui-settings-trigger):focus-visible { outline: 2px solid var(--ss-role-focus); outline-offset: 3px; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="language"] button.active { color: var(--ss-role-on-selected, var(--ss-color-ink)); background: var(--ss-role-selected); border-color: var(--ss-role-selected-edge); box-shadow: var(--ss-tab-raised-shadow-active); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-home-grid { align-items: stretch; gap: 18px; padding: 0 0 var(--ss-space-1); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-home-grid[data-calendar-slot="top-left"][data-vocabulary-slot="top-right"]:not(:has([data-panel-drop-targets])) { grid-template-rows: calc(50% + var(--ss-space-1)) calc(50% - var(--ss-space-5)); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-panel-drop-targets { gap:18px; padding:0 0 var(--ss-space-1); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="compose"] { padding: 0; min-height: 440px; height: 100%; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
@container journal-module (max-width:1100px) {
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="compose"] { min-height:360px; height:auto; }
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-home-grid[data-calendar-slot="top-left"][data-vocabulary-slot="top-right"]:not(:has([data-panel-drop-targets])) { grid-template-rows:max-content max-content; }
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-home-grid [data-component="vocabulary"] { min-height:300px; height:auto; max-height:none; }
}
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) :is([data-component="calendar"],[data-component="vocabulary"]) { padding: var(--ss-panel-padding); row-gap: 0; border: var(--ss-border-weight-inner) solid var(--ss-color-border-soft); border-radius: var(--ss-radius-md); background: var(--ss-color-paper); box-shadow: var(--ss-panel-bevel); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="kanji"] { padding: var(--ss-panel-padding); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="calendar"] { align-self: start; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="vocabulary"] { height: 100%; max-height: 100%; align-self: stretch; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .home-panel-header { color: var(--ss-color-ink); font-family: var(--ss-font-chrome); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .home-panel-grip { color: var(--ss-color-ink-soft); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-window-panel] { border: 0; border-radius: 0; background: var(--ss-color-paper); box-shadow: none; }
:is([data-skin="keepsake"], [data-skin="clean"]) [data-workspace-window][data-module-id="journal-vocabulary"] .ui-workspace-client { background: var(--ss-color-paper); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]).journal-integrated-journal-vocabulary { background: var(--ss-color-paper); }
/* The title bar stands in for the docked header; the word keeps the docked panel's top padding below it. */
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-window-panel="vocabulary"] { padding: var(--ss-panel-padding) 0 0; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .home-vocab-content { container-type: normal; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="vocabulary-card"] { padding-top: 0; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="language"] button { min-height: 46px; font: 24px var(--ss-font-retro); font-family:var(--ss-font-chrome); line-height: 1; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="toolbar"] { padding: 0; flex-wrap: wrap; gap: 8px; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="toolbar"] > button { width: auto; min-width: 0; font-size: var(--ss-text-base); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="reader"]:not(.tonight-entry):not([hidden]) { padding: 0; border: 0; background: transparent; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"] .entry-reader-copy { max-width: 42rem; margin-inline: auto; width: 100%; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"][data-reader-mode="read-through"] .entry-reader-copy { max-width: none; margin-inline: 0; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"] .entry-reader-copy:has(> .sentence-mode-stage) { max-width: none; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) :is([data-reader-context="entries"], [data-reader-context="review"], [data-reader-context="today"]) .entry-reader-japanese { font-size: var(--ss-text-base); line-height: 1.7; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) :is([data-reader-context="entries"], [data-reader-context="review"], [data-reader-context="today"]) .entry-reader-read-through { gap: var(--ss-space-1); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) :is([data-reader-context="entries"], [data-reader-context="review"], [data-reader-context="today"]) .entry-reader-sentence > p[lang="en"] { color: var(--ss-color-ink-soft); font-size: var(--ss-text-base); line-height: 1.4; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"] .focus-sentence { line-height: 1.6; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"] .week-shadow-sentence { font-size: var(--ss-text-display); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-reader-context="entries"] .entry-reader-player { padding: 0; border: 0; background: transparent; box-shadow: none; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="translation"] { padding: 24px; background: var(--ss-color-shell); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="calendar-grid"] button { box-shadow: none; }
@container journal-module (max-width:1100px) {
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="vocabulary"] { justify-self: stretch; }
}
@media(max-width:700px) {
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="translation"] { padding: 12px; }
}
/* The saved mobile reader replaces the writing controls until Edit entry is used. */
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-mobile-view="write"]:has(> [data-component="reader"]:not([hidden])) > :is([data-component="language"],[data-component="toolbar"]) { display: none; }
/* Named destinations carry their meaning; retain functional player/window controls. */
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations [data-journal-icon],
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="language"] [data-journal-icon],
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="toolbar"] [data-journal-icon] { display: none; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-journal-mailbox-trigger] .journal-envelope-art { display: block; width: 20px; height: 20px; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-component="language"] [data-language="ja"] .kana-icon { display: inline-flex; align-items: baseline; color: currentColor; font-size: var(--ss-text-base); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-destinations .ui-settings-trigger .ui-icon { width: 20px; height: 20px; color: var(--ss-color-ink); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-mailbox-dot { top: 0; right: 0; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button.is-empty { opacity: 1; color: var(--ss-color-ink-soft); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button:not(.is-empty) time b { background: var(--ss-role-tag); color: var(--ss-role-tag-ink); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button.selected { color: var(--ss-color-ink); border-color: var(--ss-role-selected-edge); background: var(--ss-role-selected-soft); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button.selected :where(time b, time span, strong, small) { color: var(--ss-color-ink); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button.is-playing:not(.selected) { color: var(--ss-color-ink); border-color: var(--ss-role-study-card-edge); background: var(--ss-role-study-card); }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-entry-cards > button.is-playing :where(time b, time span, strong, small) { color: var(--ss-color-ink); }
/* Journal's phone Settings matches the shell's ⊞ Pocket Study button at the other end of the top bar. */
@media(max-width:700px) {
 :is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .mobile-header [data-settings-trigger] { box-sizing: border-box; width: var(--ui-phone-nav-size, 36px); min-width: var(--ui-phone-nav-size, 36px); height: var(--ui-phone-nav-size, 36px); min-height: var(--ui-phone-nav-size, 36px); padding: 0; }
}
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-feeling-stamp,
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-feeling-trigger > i,
:is([data-skin="keepsake"], [data-skin="clean"]) .ui-workspace-title > .ui-icon { display: none; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) [data-settings-trigger] [data-ui-icon="settings"] { width: 20px; height: 20px; color: currentColor; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .home-vocab-term { font-weight: 500; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .home-vocab-term ruby { ruby-position: over; line-height: 1.35; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-feeling-trigger > span { font-size: var(--ss-text-base); }

/* Let short windows scroll the panels instead of compressing their contents. */
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .week-compose-reader [data-component="compose"] { min-height: 0; gap: 0; padding: 16px 24px 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .journal-compose > .language-tabs { flex-shrink: 0; }

/* Journal's speaker is ink, as Decks' is. */
:is(.journal-app[data-skin="keepsake"], .journal-app[data-skin="clean"]) .ui-audio-control:not([aria-pressed="true"], :hover) { color: var(--ss-color-ink); }
/* Shared speaker glyph for the framed and audio buttons in Journal and Decks. */
:is([data-skin="keepsake"], [data-skin="clean"]) :is(.ui-audio-control, .ui-secondary-icon-button) [data-ui-icon="card-speaker"] { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3V9Zm12.5-.6a5 5 0 0 1 0 7.2l-1.4-1.5a3 3 0 0 0 0-4.2l1.4-1.5Zm2.8-2.8a9 9 0 0 1 0 12.8l-1.4-1.5a7 7 0 0 0 0-9.8l1.4-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
:is([data-skin="keepsake"], [data-skin="clean"]) :is(.ui-audio-control, .ui-secondary-icon-button) [data-ui-icon="card-speaker"] > image { display: none; }