/* Layout: one phone-width column. The reading desk (photo or paste) on top, the coloured page in the middle, the colour key underneath.
   The chrome stays ink on cool paper so the only colour on screen is grammar. System fonts only, so it works offline. */
:root {
  --paper: #F3F4F7; --sheet: #FFFFFF; --ink: #14171D; --ink-2: #4D5461; --ink-3: #868D99;
  --line: #DCE0E6; --soft: #E9ECF0; --seg-none: #E3E6EB; --seg-on: #FFFFFF; --btn: #14171D; --btn-ink: #FFFFFF;
  --scrim: rgba(12, 14, 18, .48); --shadow: 0 1px 2px rgba(20, 23, 29, .06), 0 8px 24px rgba(20, 23, 29, .06);
  --display: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text: -apple-system, system-ui, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --arabic: "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, serif;
  /* grammar colours */
  --neg: #D92D2D; --neg-ink: #FFFFFF;
  --pos: #2E9E44; --pos-ink: #FFFFFF;
  --verb: #1F6FD1; --verb-ink: #FFFFFF;
  --adj: #F5C518; --adj-ink: #2A2100;
  --subj: #7B3FC4; --subj-ink: #FFFFFF;
  --prep: #FF8A80; --prep-ink: #4A120D;
  --q: #8A5A33; --q-ink: #FFFFFF;
  --modal: #7C828B; --modal-ink: #FFFFFF;
  --pl: #E8680F; --pl-ink: #FFFFFF;
  --past: #7A1F35; --past-ink: #FFFFFF;
  --pres: #1E5B33; --pres-ink: #FFFFFF;
  --cont: #1D2B6B; --cont-ink: #FFFFFF;
  --formal: #0E8A8A; --formal-ink: #FFFFFF;
  --informal: #E3CFAE; --informal-ink: #3A2C17;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper) }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--text); padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-block: 20px calc(96px + env(safe-area-inset-bottom, 0px)) }
html.lock body { overflow: hidden }
img { max-width: 100% }
a { color: inherit }
.wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 16px }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 16px }
.mark { margin: 0; font: 800 31px/1 var(--display); letter-spacing: -.01em; display: flex; gap: 3px }
.mp { padding: .13em .17em .11em; border-radius: .2em; background: var(--seg-none) }
.mp.v { background: var(--verb); color: var(--verb-ink) }
.etym { margin: .6rem 0 0; color: var(--ink-2); font-size: 13px; max-width: 34ch }
.etym b { font-weight: 600; color: var(--ink) }
.seg { display: inline-flex; background: var(--soft); border-radius: 12px; padding: 3px; gap: 3px }
.seg button { appearance: none; border: 0; background: transparent; color: var(--ink-2); padding: 7px 14px; border-radius: 9px; display: grid; justify-items: center; line-height: 1.2; cursor: pointer; min-width: 100px }
.seg button span { font-weight: 600; font-size: 15px }
.seg button span[lang="ar"] { font-family: var(--arabic); font-size: 17px; line-height: 1.1 }
.seg button small { font-size: 11px; letter-spacing: .04em; color: var(--ink-3) }
.seg button[aria-checked="true"] { background: var(--seg-on); color: var(--ink); box-shadow: var(--shadow) }
.seg button:disabled { cursor: default }

/* desk */
.desk { background: var(--sheet); border-radius: 18px; padding: 16px; box-shadow: var(--shadow) }
.shoot { display: flex; gap: 10px }
.big { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; border-radius: 14px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none }
.big.alt { background: var(--soft); color: var(--ink) }
.big svg { width: 22px; height: 22px; flex: none }
.big input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer }
.big:focus-within { outline: 2px solid var(--ink); outline-offset: 2px }
.big.off { opacity: .4; pointer-events: none }
.note { margin: 10px 0 0; font-size: 13px; color: var(--ink-2) }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; margin: 16px 0 10px }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line) }
textarea { display: block; width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: 16px/1.45 var(--text); background: var(--paper); color: var(--ink) }
textarea[dir="rtl"] { font-family: var(--arabic); font-size: 19px; line-height: 1.6 }
textarea::placeholder { color: var(--ink-3) }
textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px }
.go-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px }
.count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.primary, .soft { border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 600; font-size: 15px; cursor: pointer; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center }
.primary { background: var(--btn); color: var(--btn-ink) }
.soft { background: var(--soft); color: var(--ink) }
.primary:disabled, .soft:disabled { opacity: .4; cursor: default }
.ghost { border: 0; background: transparent; color: var(--ink-2); padding: 6px 4px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }

/* status */
.status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); font-size: 14px }
.status .txt { flex: 1; min-width: 0 }
.status .el { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px }
.dots { display: inline-flex; gap: 4px }
.dots i { width: 8px; height: 8px; border-radius: 3px; background: var(--verb); animation: hop 1.1s infinite ease-in-out }
.dots i:nth-child(2) { background: var(--past); animation-delay: .15s }
.dots i:nth-child(3) { background: var(--pl); animation-delay: .3s }
@keyframes hop { 0%, 80%, 100% { transform: translateY(0); opacity: .55 } 40% { transform: translateY(-4px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: 1 } }
.error { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); border-inline-start: 4px solid var(--neg); font-size: 14px }

/* result card */
.card { background: var(--sheet); border-radius: 20px; padding: 16px 16px 14px; box-shadow: var(--shadow) }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.src { display: flex; align-items: center; gap: 10px; min-width: 0 }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; flex: none; background: var(--soft) }
.badge { font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 7px 9px; border-radius: 7px; background: var(--soft) }
.toggles { display: flex; gap: 6px }
.tog { border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font-weight: 500; font-size: 13px; cursor: pointer; min-height: 34px }
.tog[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink) }
.page { display: grid; gap: 14px; font-family: var(--text); font-size: clamp(24px, 6.6vw, 32px); color: var(--ink); overflow-wrap: anywhere }
.page.ar { font-family: var(--arabic); font-size: clamp(28px, 7.6vw, 38px) }
.line { margin: 0; line-height: 2.05; word-spacing: .1em }
.page.ar .line { line-height: 2.25 }
.page.labels .line { line-height: 2.75 }
.page.means .line { line-height: 2.6 }
.page.labels.means .line { line-height: 3.2 }
.page.ar.labels .line { line-height: 2.85 }
.br { height: 4px }
.tr { margin: -4px 0 0; font: italic 400 15px/1.45 var(--text); color: var(--ink-2) }
.empty { font: 15px/1.5 var(--text); color: var(--ink-3); margin: 0 }
.w { white-space: nowrap; cursor: pointer; border-radius: .22em; -webkit-tap-highlight-color: transparent; position: relative; display: inline-block; line-height: 1.28; vertical-align: baseline }
.w:focus-visible, .w.on { outline: 2px solid var(--ink); outline-offset: 3px }
/* a word with its meaning underneath is at least as wide as the meaning, so short words don't cut it off.
   The meaning's line takes no height (negative bottom margin), so lines keep their spacing. */
.w.has-gl { display: inline-grid; justify-items: center }
.ws { display: inline-block; border-radius: .22em }
.w.has-gl:focus-visible, .w.has-gl.on { outline: none }
.w.has-gl:focus-visible .ws, .w.has-gl.on .ws { outline: 2px solid var(--ink); outline-offset: 3px }
.w .gl { position: relative; top: .12em; margin-bottom: -1.1em; max-width: 15em; padding-inline: .3em; font: 400 11px/1.1 var(--text); word-spacing: normal; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; direction: ltr; pointer-events: none }
.labels .w .gl { top: 1.5em }
.s { display: inline-block; line-height: 1.28; padding: 0 .03em; border-radius: .16em; position: relative }
.s.f { background: var(--f); color: var(--k); padding: 0 .13em }
.s.nf { background: var(--seg-none); padding: 0 .13em }
.s.u { box-shadow: inset 0 -.15em 0 var(--u) }
.w .s + .s { margin-inline-start: 2px }
.page.ar .w .s + .s, .sheet-word.ar .s + .s { margin-inline-start: 0 }
.page.ar .s, .sheet-word.ar .s { border-radius: 0; padding-inline: 0 }
.page.ar .s.f:first-of-type, .page.ar .s.nf:first-of-type, .sheet-word.ar .s.f:first-of-type, .sheet-word.ar .s.nf:first-of-type { padding-inline-start: .13em; border-start-start-radius: .16em; border-end-start-radius: .16em }
.page.ar .s.f:last-of-type, .page.ar .s.nf:last-of-type, .sheet-word.ar .s.f:last-of-type, .sheet-word.ar .s.nf:last-of-type { padding-inline-end: .13em; border-start-end-radius: .16em; border-end-end-radius: .16em }
/* labels: row 1 holds the pieces, row 2 each piece's label in the same column. A label wider than its piece widens the column,
   so the coloured box stays tight and the next piece moves over. The label row takes no height, so lines keep their spacing. */
.labels .ws { display: inline-grid; justify-items: center }
.labels .ws > .s { grid-row: 1 }
.lb { grid-row: 2; position: relative; top: .18em; margin-bottom: -1em; padding-inline: .3em; font: 600 9.5px/1 var(--text); letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; direction: ltr }
.s.dim { background: transparent; color: var(--ink-3); box-shadow: none }
.lb.dim { opacity: .35 }
.p { color: var(--ink) }
.hint { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3) }
.info { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; background: var(--soft) }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer }
.chk input { width: 18px; height: 18px; accent-color: var(--ink) }
.acts { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end }
@media (max-width: 480px) { .acts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 } .acts .primary { grid-column: 1 / -1 } }

/* colour key */
.key { padding: 4px 2px 0 }
.key-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.key h2 { margin: 0; font: 700 16px/1.2 var(--display) }
.key .sub { margin: 6px 0 2px; font-size: 13px; color: var(--ink-2); max-width: 60ch }
.kg h3 { margin: 16px 0 8px; font: 600 10.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.kgrid { display: grid; grid-template-columns: 1fr; gap: 6px }
@media (min-width: 560px) { .kgrid { grid-template-columns: 1fr 1fr } }
.ki { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: start; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1.5px solid transparent; background: var(--sheet); cursor: pointer; min-height: 52px }
.ki[aria-pressed="true"] { border-color: var(--ink) }
.sw { min-width: 66px; text-align: center; padding: 4px 8px; border-radius: 8px; background: var(--f); color: var(--k); font-weight: 600; font-size: 16px; line-height: 1.3; white-space: nowrap }
.sw.ar { font-family: var(--arabic); font-size: 18px; line-height: 1.25 }
.kt b { display: block; font-weight: 600; font-size: 14px }
.kt small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.35 }
.kt .arx { font-family: var(--arabic); font-size: 1.12em; white-space: nowrap }
.kc { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 2ch; text-align: end }
.ki.zero .kc { color: var(--ink-3) }
.foot { margin: 6px 2px 0; font-size: 12.5px; color: var(--ink-3); max-width: 62ch }

/* layers */
.layer { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center }
.scrim { position: absolute; inset: 0; background: var(--scrim) }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 88%; overflow: auto; background: var(--sheet); color: var(--ink); border-radius: 22px 22px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); animation: rise .22s ease-out }
@keyframes rise { from { transform: translateY(24px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none } }
@media (min-width: 640px) { .layer { align-items: center; padding: 24px } .sheet { border-radius: 22px; padding-bottom: 22px } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 10px }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; cursor: pointer }
.x svg { width: 16px; height: 16px }
.sheet-word { font: 500 34px/1.5 var(--text); min-width: 0; overflow-wrap: anywhere }
.sheet-word.ar { font-family: var(--arabic); font-size: 40px }
.sheet-gloss { margin: 2px 0 6px; color: var(--ink-2); font-size: 15px }
.sheet-gloss .lem { color: var(--ink); font-weight: 600; margin-inline-end: 6px }
.sheet-gloss .tl { font-style: italic; margin-inline-end: 8px; color: var(--ink) }
.parts { list-style: none; margin: 8px 0 0; padding: 0 }
.parts li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.pc { justify-self: start; padding: 3px 9px; border-radius: 8px; font-weight: 600; font-size: 18px; line-height: 1.35; background: var(--seg-none); color: var(--ink); white-space: nowrap }
.pc.ar { font-family: var(--arabic); font-size: 21px; line-height: 1.3 }
.pc.f { background: var(--f); color: var(--k) }
.pc.u { box-shadow: inset 0 -4px 0 var(--u) }
.pt b { display: block; font-size: 14px }
.pt b.none { color: var(--ink-3); font-weight: 500 }
.pt span { display: block; font-size: 13.5px; color: var(--ink-2) }
.sheet-tr { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14px; color: var(--ink-2) }
.sheet h2 { margin: 0; font: 700 17px/1.3 var(--display) }
.card-img { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; margin: 14px auto 0; border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); -webkit-touch-callout: default }
.save-hint { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); text-align: center }
.save-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; background: var(--btn); color: var(--btn-ink); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); max-width: calc(100% - 32px) }

/* saved phrases */
.saved { padding: 4px 2px 0 }
.saved h2 { margin: 0; font: 700 16px/1.2 var(--display) }
.saved-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px }
.saved-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--sheet); border-radius: 14px; padding: 10px 8px 10px 10px; box-shadow: var(--shadow) }
.saved-item .open { all: unset; cursor: pointer; display: grid; gap: 4px; min-width: 0 }
.saved-item .open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px }
.saved-item .mini { font: 500 17px/1.6 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink) }
.saved-item .mini.ar { font-family: var(--arabic); font-size: 19px }
.saved-item .mini .s { line-height: 1.3 }
.saved-item .meta { font-size: 12px; color: var(--ink-3) }
.saved-item .pic { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--soft) }
.saved-item .pic.none { display: grid; place-items: center; font: 700 15px var(--display); color: var(--ink-3) }
.saved-item .del { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center }
.saved-item .del:hover { background: var(--soft); color: var(--ink) }
#keepBtn[aria-pressed="true"] { background: var(--ink); color: var(--sheet) }

/* crop */
.crop-layer { align-items: stretch; background: #0B0C0F }
.crop { position: relative; width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); color: #ECEEF2; gap: 10px; height: 100% }
.crop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.crop-head h2 { margin: 0; font: 700 17px/1.3 var(--display) }
.crop-head .x { background: #23272F; color: #ECEEF2 }
.crop-hint { margin: 0; font-size: 13px; color: #AAB1BC }
.crop-stage { position: relative; flex: 1; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 12px }
.crop-stage canvas { position: absolute; display: block }
.crop-box { position: absolute; border: 2px solid #FFFFFF; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); touch-action: none; cursor: move }
.crop-box .h { position: absolute; width: 34px; height: 34px; touch-action: none }
.crop-box .h::after { content: ""; position: absolute; width: 16px; height: 16px; border: 4px solid #FFFFFF; border-radius: 3px }
.crop-box .nw { left: -17px; top: -17px; cursor: nwse-resize } .crop-box .nw::after { left: 13px; top: 13px; border-right: 0; border-bottom: 0 }
.crop-box .ne { right: -17px; top: -17px; cursor: nesw-resize } .crop-box .ne::after { right: 13px; top: 13px; border-left: 0; border-bottom: 0 }
.crop-box .sw { left: -17px; bottom: -17px; cursor: nesw-resize } .crop-box .sw::after { left: 13px; bottom: 13px; border-right: 0; border-top: 0 }
.crop-box .se { right: -17px; bottom: -17px; cursor: nwse-resize } .crop-box .se::after { right: 13px; bottom: 13px; border-left: 0; border-top: 0 }
.crop-acts { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap }
.crop-acts .soft { background: #23272F; color: #ECEEF2; gap: 6px }
.crop-acts .primary { background: #ECEEF2; color: #121418; flex: 1; min-width: 120px }
.toast { display: flex; align-items: center; gap: 14px }
.toast-act { border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 2px }

/* translation at the top of the word sheet */
.sheet-en { margin: 4px 0 2px; font: 600 22px/1.3 var(--text); color: var(--ink) }
.sheet-en.none { font-weight: 400; font-size: 15px; color: var(--ink-3) }

/* colour key strip, fixed to the bottom of the screen */
.keybar { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(688px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--sheet); color: var(--ink); box-shadow: 0 2px 6px rgba(20, 23, 29, .1), 0 10px 30px rgba(20, 23, 29, .14); cursor: pointer; text-align: start }
.kb-dots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0 }
.kb-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap }
.kb-dot i { width: 14px; height: 14px; border-radius: 4px; background: var(--f); flex: none }
.kb-dots.compact .kb-dot b { display: none }
.kb-label { font-weight: 600; font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 4px }
.kb-label svg { width: 14px; height: 14px }
.key-sheet .kgrid { grid-template-columns: 1fr }