/* Clarity: layout and mark looks. Each kind = tint + underline pattern, so it reads without color. Ink stays >= 4.5:1 on every tint. */
:root { --app: #0f9d76; --app-dark: #3ddba8; } /* Clarity's signature emerald (CLAUDE.md "App colors") */
:root {
  /* Sentence tints follow the app color, so they stay in step with the kit in both themes. */
  --m-tangled: color-mix(in oklab, var(--accent) 30%, var(--surface));
  --m-heavy: color-mix(in oklab, var(--accent) 10%, var(--surface));
  --m-sand: #f0e2c6; --m-soft: #b4532a; --m-muted: #5f6a65;
  --serif: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --m-sand: #4a3f2a; --m-soft: #f2a65a; --m-muted: #9aa49f; }
}
:root[data-theme="dark"] { --m-sand: #4a3f2a; --m-soft: #f2a65a; --m-muted: #9aa49f; }

.k-veryhard { background: var(--m-tangled); text-decoration: underline solid var(--accent) 2px; }
.k-hard { background: var(--m-heavy); text-decoration: underline dotted var(--accent) 2px; }
.k-adverb, .k-passive, .k-qualifier { text-decoration: underline wavy var(--m-soft) 2px; }
.k-simpler { background: var(--m-sand); text-decoration: underline double var(--m-muted) 3px; }
/* Hiding is pure CSS so toggles never re-render. Focus hides all. */
.is-focus mark,
.hide-veryhard .k-veryhard, .hide-hard .k-hard, .hide-simpler .k-simpler,
.hide-soft :is(.k-adverb, .k-passive, .k-qualifier) { background: none; text-decoration: none; }

.p-wrap { display: grid; gap: 1rem; padding: 1rem; max-width: 1100px; margin: 0 auto; }
.p-wrap > * { min-width: 0; }
.p-panel { order: 1; display: grid; gap: .75rem; align-content: start; }
.p-panel h2 { margin: 0; font-size: 1.125rem; }
@media (min-width: 900px) {
  .p-wrap { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .p-panel { order: -1; position: sticky; top: 1rem; }
  .p-wrap.is-focus { grid-template-columns: minmax(0, 1fr); }
}
.p-wrap.is-focus .p-panel { display: none; }

.p-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.p-editor { position: relative; }
.p-back, .p-text {
  font: 1.1875rem/1.75 var(--serif); padding: 1.5rem; border: 0; margin: 0; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal;
}
.p-back, .p-text { max-width: calc(30em + 3rem); margin-inline: auto; }
.p-back { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.p-text { position: relative; display: block; width: 100%; min-height: 18rem; resize: none; overflow: hidden; background: transparent; color: var(--ink); }
.p-text { caret-color: var(--accent); }
.p-text::selection { background: var(--m-tangled); color: var(--ink); }
.p-text:focus, .p-text:focus-visible { outline: none; box-shadow: none; border: 0; }
/* The text column is narrower than the card, so the focus ring goes on the card. */
.p-card:has(.p-text:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
mark { color: inherit; background: none; }
mark mark { text-underline-offset: .22em; } /* word marks sit lower than the sentence underline */

.p-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .625rem 1rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.p-level-n { font-weight: 600; }
.p-chip { display: inline-block; padding: 0 .625rem; border: 1px solid var(--accent); border-radius: 999px; font-size: .8125rem; color: var(--ink); }
.p-chip[data-v="fair"] { border-color: var(--m-soft); }
.p-chip[data-v="dense"] { border-color: var(--m-soft); background: var(--m-soft); color: var(--surface); }
.p-chip[data-v="empty"] { border-color: var(--line); color: var(--muted); }
.p-focus { margin-left: auto; border-radius: 999px; }
.p-focus[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.p-stats { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem 1rem; margin: 0; }
.p-stats div { display: grid; }
.p-stats dt { color: var(--muted); font-size: .8125rem; } .p-stats dd { margin: 0; }
.is-focus .p-review-only, .is-focus .p-stats { display: none; }

.p-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.p-row { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: .5rem; align-items: center; }
.p-swatch { font: 1rem/1.4 var(--serif); text-align: center; border-radius: 3px; color: var(--ink); }
/* Show/hide is a small on/off switch drawn in CSS. */
.p-eye { padding: 0 .5rem; border-color: transparent; background: none; }
.p-switch { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--accent); transition: background .15s; }
.p-switch::after { content: ""; position: absolute; top: .1875rem; left: 1.1875rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--accent-ink); transition: left .15s; }
.p-eye[aria-pressed="false"] .p-switch { background: var(--line); }
.p-eye[aria-pressed="false"] .p-switch::after { left: .1875rem; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
@media (prefers-reduced-motion: reduce) { .p-switch, .p-switch::after { transition: none; } }
.p-soft-detail { font-size: .875rem; color: var(--muted); padding-left: 2.75rem; }
.p-details { padding: .25rem .625rem; min-height: 0; font-size: .8125rem; }
.p-tip { margin: 0; padding: .625rem .75rem; border: 1px dashed var(--line); border-radius: var(--radius); font-size: .9375rem; color: var(--muted); }
.p-tip.is-on { border-style: solid; border-color: var(--accent); color: var(--ink); }
[hidden] { display: none !important; }
@media (max-width: 899px) { .p-back, .p-text { font-size: 1.0625rem; padding: 1rem; } }
/* The longer app name needs the header buttons a little tighter on phones. */
@media (max-width: 420px) {
  .u-bar { gap: .25rem; padding-inline: .75rem; } .u-bar .u-btn { width: 36px; min-height: 36px; }
  .u-brand { gap: .5rem; } .u-brand img { width: 28px; height: 28px; } .u-brand span { font-size: 1rem; }
}