/* YoMiE web app (Web 案 A: the website's typefaces). The tokens and the shared parts come from
   core.css; the panel on the right is the extension's side panel, its styles (sidepanel.css,
   loaded before this file) shared as they are. This file sets the Web's typefaces, puts the
   panel in a column beside the article (one tab at a time under 900px), and styles what is the
   Web's own: the entry screen, the article card, the sentence card under the list and its
   translation steps. */
:root {
  --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --en: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --read: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; /* the diagram's and the list's English in the site's typeface */
  --paper: #f5f6f8;
  --src-size: 24px;
  --body-size: 18px;
}
/* The dark ground (DESIGN.md, 暗い地): sidepanel.css switches the tokens; the page behind the
   cards goes a step darker than the panel's ground. */
:root[data-theme="dark"] {
  --paper: #101317;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101317;
  }
}

/* ---------- the page (overrides the side panel's own page rules) ---------- */
html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px / 1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
body {
  padding-bottom: 0;
}
#app {
  display: block;
  padding: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.left * {
  min-width: 0;
}
.left :is(h1, h2, h3, h4, p, ol, ul) {
  margin: 0;
}
.mu {
  color: var(--muted);
}
.small {
  font-size: 12px;
}
.tn {
  font-variant-numeric: tabular-nums;
}
.note {
  font-size: 13px;
  color: var(--muted);
}
.note.error,
.status.error {
  color: var(--V-dark);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* the key popovers (core key-popover) in the Web's typeface */
.c-pop,
.c-icon {
  font-family: var(--body);
}
kbd {
  font-family: var(--body);
}

/* ---------- buttons (DESIGN.md: 主 1 つ / 通常 / 控えめ) ---------- */
button {
  font: inherit;
  color: inherit;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-fill);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- the shell: the article (or the entry) and the panel's column ---------- */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 40px;
  align-items: start;
}
.ym-panel {
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font: 400 13px / 1.55 var(--body);
}
.p-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 0;
}
.p-head > * + * {
  margin-top: 4px;
}
.p-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The tab bar sits at the panel's foot (the side panel fixes it to the window's). */
.ym-panel .tabs {
  position: static;
  flex: none;
  padding: 4px 8px 6px;
}
.tabs .tab[data-tab="article"] {
  display: none;
}
.brand {
  text-decoration: none;
}
.brand svg {
  display: block;
  width: 26px;
  height: 26px;
}
/* the list keeps a fixed height, so the card for the chosen sentence shows under it */
.ym-panel .hub {
  position: relative;
  flex: none;
}
.ym-panel .hub-body {
  flex: none;
  height: var(--hub-h, 200px);
}
.ym-panel .hub-map {
  min-height: 0;
}
.ym-panel .c-pop.hub-help {
  top: 34px;
}
.hub-title b {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  font-family: var(--body);
}
.hub-t {
  font-family: var(--en);
}
.page-empty .note {
  margin: 0;
}

/* ---------- the entry screen ---------- */
.entry {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 24px 0 40px;
  text-align: center;
}
.h-entry {
  font: 900 36px / 1.2 var(--display);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.entry .lead {
  max-width: 40em;
  margin: 0 auto;
}
.left .card {
  overflow: visible;
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--line);
  padding: 20px 22px;
}
.left .card h2 {
  text-transform: none;
  letter-spacing: 0;
}
h2.sec {
  font: 700 13px / 1.4 var(--body);
  color: var(--ink);
  margin: 22px 0 8px;
}
.entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}
.ent {
  display: grid;
  gap: 10px;
  align-content: start;
}
.left .ent h2 {
  font: 700 15px / 1.4 var(--body);
  color: var(--ink);
  margin: 0;
}
.ent input,
.ent textarea,
.signin input:not([type="checkbox"]) {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  min-height: 44px;
}
.ent textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--en);
}
.ent .btn {
  justify-self: start;
}
.entry .note.error {
  margin-top: 16px;
}
.recent {
  margin-top: 40px;
  text-align: left;
}
.foot-note {
  margin-top: 28px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.list li:first-child {
  border-top: 0;
}
.list .t {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.list .t b {
  display: block;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list .t span {
  font-size: 12px;
  color: var(--muted);
}
/* where a page was read (履歴) */
.src-tag {
  flex: none;
  align-self: center;
  font: 600 11px / 1 var(--body);
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 4px 6px;
  white-space: nowrap;
}
.signin {
  text-align: left;
  display: grid;
  gap: 12px;
}
.entry .signin {
  margin-top: 28px;
}
.signin h2 {
  font: 700 16px / 1.4 var(--body);
}
.signin form {
  display: grid;
  gap: 10px;
}
.signin .check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
}
.signin .check input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex: none;
}

/* ---------- the article card ---------- */
.card.art {
  padding: 24px 32px 32px;
}
.backlink {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.backlink:hover {
  color: var(--ink);
  text-decoration: underline;
}
.site {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--en);
}
.h-art {
  font: 900 40px / 1.1 var(--display);
  letter-spacing: -0.02em;
  margin: 4px 0 12px;
  overflow-wrap: anywhere;
}
.diff {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.diff b {
  color: var(--ink);
  font-weight: 600;
}
.aprog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 22px;
}
.aprog .bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  min-width: 48px;
}
.aprog .bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.aprog .n {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.art .body {
  font: 400 var(--body-size) / 1.75 var(--read);
  display: grid;
  gap: 1em;
}
.art .body h2 {
  font: 700 22px / 1.3 var(--read);
  color: var(--ink);
  margin: 0.4em 0 0;
}
.art .sen {
  border-radius: 3px;
  cursor: pointer;
}
.art .sen:hover {
  background: var(--hover);
  box-shadow: 0 0 0 3px var(--hover);
}
.art .sen.cur {
  background: var(--accent-bg);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ---------- the sentence card under the list (the extension's 構造のカード) ---------- */
.scard {
  flex: none;
  padding: 10px 12px 12px;
}
.c-head {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.c-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding-top: 4px;
}
.card h2.c-title {
  margin: 0 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.c-icon:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}
.scard > .c-pop {
  top: 44px;
  right: 8px;
  width: min(320px, calc(100% - 16px));
}
.c-tabs {
  display: flex;
  gap: 2px;
  margin: 6px -12px 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.c-tabs button {
  height: 34px;
  margin-bottom: -1px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.c-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.c-tabs button:hover {
  color: var(--ink);
}
.c-tabs .c-n {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
/* one column as wide as the card: the diagram scrolls inside it, it does not widen the card */
.c-body {
  padding-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.c-structure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 60px;
}
.c-body > .point:first-child {
  margin-top: 0;
}
.c-foot > .btn-row {
  justify-content: flex-end;
  margin-top: 12px;
}
.c-foot > .status {
  margin-top: 6px;
  text-align: right;
}
/* the translation in three steps */
.tr {
  display: grid;
  gap: 6px;
}
.tr-h {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.st {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
  flex-wrap: wrap;
}
.st .k {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--guide);
  display: grid;
  place-items: center;
  font: 700 11px / 1 var(--body);
  color: var(--muted);
}
.st.open .k {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-fill);
}
.st .stb {
  flex: 1;
  min-width: 10em;
}
.st b {
  font-size: 13px;
  display: block;
}
.st p {
  font-size: 12px;
  line-height: 1.6;
  margin: 2px 0 0;
}
.st.later b {
  color: var(--muted);
}
.st .btn {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.glosses {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: 12px;
}
.glosses li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.glosses b {
  font: 600 13px / 1.4 var(--en);
}
.glosses .via {
  font-size: 11px;
  color: var(--muted);
}

/* ---------- 設定: the account and the connection ---------- */
.acct-email {
  min-width: 0;
  overflow-wrap: anywhere;
}
.qrow {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.qrow .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.qrow .bar i {
  display: block;
  height: 100%;
  background: var(--ink);
}
.field > .hint + .hint {
  margin-top: 2px;
}
.conn-fields label {
  margin: 8px 0;
}
.conn-fields input {
  margin-top: 2px;
}

/* ---------- narrow: the article and each of the panel's tabs is the screen ---------- */
@media (max-width: 899px) {
  .shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom));
  }
  .ym-panel {
    display: contents;
  }
  .p-head {
    order: -1;
    padding: 12px 16px 0;
  }
  .left {
    padding: 12px 16px 20px;
  }
  .p-body {
    overflow: visible;
    padding: 12px 16px 20px;
  }
  .shell:not([data-tab="article"]) > .left,
  .shell[data-tab="article"] .p-body {
    display: none;
  }
  /* back on the window's foot, as in the extension, with 記事 first */
  .ym-panel .tabs {
    position: fixed;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  }
  .tabs .tab[data-tab="article"] {
    display: flex;
  }
  .ym-panel .hub-body {
    --hub-h: 150px;
  }
  .card.art {
    padding: 20px 18px;
  }
  :root {
    --src-size: 22px;
    --body-size: 17px;
  }
  .h-art {
    font-size: 30px;
  }
  .entries {
    grid-template-columns: 1fr;
  }
  .h-entry {
    font-size: 28px;
  }
  .entry {
    padding-top: 12px;
  }
}