/* Scriber for iPad: the same window as Scriber on Windows (Scriber/src/MainWindow.xaml, Theme.xaml,
   Shared/MenuLook.cs): the title row, the white card holding File, the tabs, the search box and the ribbon
   of grouped tiles, the page on the pale backdrop, and the status bar. Colours are Theme.cs's. */
@font-face { font-family: Montserrat; font-weight: 300; src: url(../fonts/Montserrat-Light.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 400; src: url(../fonts/Montserrat-Regular.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 400; font-style: italic; src: url(../fonts/Montserrat-Italic.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 500; src: url(../fonts/Montserrat-Medium.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 600; src: url(../fonts/Montserrat-SemiBold.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; src: url(../fonts/Montserrat-Bold.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; font-style: italic; src: url(../fonts/Montserrat-BoldItalic.woff2) format('woff2'); }

:root {
  --app-bg: #E8EBF2; --chrome: #FFFFFF; --surface: #FFFFFF; --field: #FFFFFF;
  --ink: #1E2233; --muted: #636A80; --line: #E1E4EC; --hover: #EDEFF5; --pressed: #E3E6EE;
  --accent: #0E7C6B; --accent-hover: #0B6457; --accent-soft: #D9EFEA; --accent-ink: #FFFFFF;
  --tile: #F6F7FB; --thumb: #C9CDD8; --link: #0A66C2; --page: #FFFFFF; --page-ink: #1F2124;
  --danger: #D64545; --ok: #2F9E6B;
  --shadow: 0 2px 6px rgba(20, 24, 40, .06), 0 10px 28px rgba(20, 24, 40, .08);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #121419; --chrome: #1F222A; --surface: #1F222A; --field: #272B34;
    --ink: #E6E8EF; --muted: #9AA1B5; --line: #343945; --hover: #2E323D; --pressed: #363B47;
    --accent: #35BFA6; --accent-hover: #4FD0B8; --accent-soft: #1E4A42; --accent-ink: #0D1F1C;
    --tile: #272B34; --thumb: #4A505E; --link: #6CB4FF; --page: #1F2023; --page-ink: #E3E4E6;
    --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app-bg: #121419; --chrome: #1F222A; --surface: #1F222A; --field: #272B34;
  --ink: #E6E8EF; --muted: #9AA1B5; --line: #343945; --hover: #2E323D; --pressed: #363B47;
  --accent: #35BFA6; --accent-hover: #4FD0B8; --accent-soft: #1E4A42; --accent-ink: #0D1F1C;
  --tile: #272B34; --thumb: #4A505E; --link: #6CB4FF; --page: #1F2023; --page-ink: #E3E4E6;
  --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--app-bg); color: var(--ink);
  font: 13px/1.35 Montserrat, system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: default; padding: 0; margin: 0; }
input, select, textarea { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
/* icons: 24-unit strokes drawn at 18px, as the desktop's Ico style (0.75 scale) */
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
svg.big { width: 26px; height: 26px; stroke-width: 1.5; }
svg.chev { width: 8px; height: 5px; stroke-width: 1.5; stroke: var(--muted); fill: none; flex: none; }

.window { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }

/* ---------------- title row (46): Scriber, the name in the middle with its save state, undo/redo/save ---------------- */
.titlebar { position: relative; height: 46px; flex: none; display: flex; align-items: center; padding: 0 12px; }
.logo { height: 30px; padding: 3px 10px 3px 3px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.logo:hover { background: var(--hover); color: var(--ink); }
.title-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 340px); }
.title-btn { height: 34px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.title-btn:hover { background: var(--hover); }
.title-btn b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.save-pill { flex: none; display: flex; align-items: center; gap: 6px; background: var(--surface); border-radius: 11px; padding: 3px 10px 4px 9px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.save-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.save-pill.dirty i { background: var(--danger); }
.top-actions { margin-left: auto; display: flex; gap: 6px; }
.top-icon { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); display: grid; place-items: center; }
.top-icon:hover { background: var(--hover); }
.top-icon:active { background: var(--pressed); }
.top-icon:disabled { opacity: .4; }

/* ---------------- the card: File, tabs, search; then the ribbon ---------------- */
.topcard { margin: 0 12px; background: var(--surface); border-radius: 20px; flex: none; }
.tabrow { display: flex; align-items: center; padding: 10px 12px 6px; gap: 0; }
.file-btn { height: 36px; padding: 0 14px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 600; display: flex; align-items: center; gap: 6px; margin-right: 10px; flex: none; }
.file-btn:hover { background: var(--accent-hover); }
.file-btn svg.i { width: 16px; height: 16px; }
.tabtrack { background: var(--tile); border-radius: 12px; padding: 3px; display: flex; flex: none; }
.tab { padding: 6px 14px; margin: 0 2px; border-radius: 10px; color: var(--muted); white-space: nowrap; }
.tab:hover { background: var(--hover); color: var(--ink); }
.tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.searchfield { position: relative; flex: 1; min-width: 36px; height: 36px; margin: 0 10px 0 12px; border-radius: 12px; background: var(--tile); display: flex; align-items: center; }
.searchfield svg.i { position: absolute; left: 9px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.searchfield input { width: 100%; height: 100%; border: 0; outline: 0; background: none; padding: 0 10px 0 32px; font-size: 13px; }
.searchfield input::placeholder { color: var(--muted); }
.searchfield input::-webkit-search-cancel-button { -webkit-appearance: none; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; padding: 4px; }
.results button { display: flex; width: 100%; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; text-align: left; }
.results button.sel, .results button:hover { background: var(--hover); }
.results small { margin-left: auto; color: var(--muted); font-size: 12px; }
.results .none { padding: 10px; color: var(--muted); }
.tb { min-width: 28px; height: 30px; padding: 0 5px; margin: 1px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 13px; flex: none; }
.tb:hover { background: var(--hover); }
.tb:active { background: var(--pressed); }
.tb.on { background: var(--accent-soft); }
.tb:disabled { opacity: .35; }
.tb.text { font-size: 14px; }

.ribbon { padding: 2px 4px 9px; overflow: hidden; border-radius: 0 0 20px 20px; }
.ribbon.collapsed { display: none; }
.panel { display: flex; align-items: stretch; transform-origin: left top; width: max-content; }
.panel.slide { animation: slide .18s ease-out; }
@keyframes slide { from { opacity: 0; transform: translateX(14px); } }
.group { background: var(--tile); border-radius: 16px; padding: 5px 7px 6px; margin: 0 2px; display: flex; flex-direction: column; }
.group > .body { flex: 1; display: flex; align-items: center; }
.group > label { display: block; text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; }
.rows { display: flex; flex-direction: column; gap: 2px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.sep { width: 1px; height: 18px; margin: 0 6px; background: var(--line); flex: none; }
.bigbtn { height: 62px; min-width: 58px; padding: 4px 6px; margin: 1px; border-radius: 9px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; flex: none; }
.bigbtn:hover { background: var(--hover); }
.bigbtn.on { background: var(--accent-soft); }
.bigbtn span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.wide-btn { height: 30px; padding: 0 8px; justify-content: flex-start; }
.combo { height: 28px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); display: inline-flex; align-items: center; margin: 1px 2px 1px 1px; flex: none; }
.combo input { border: 0; outline: 0; background: none; height: 100%; padding: 0 0 0 8px; min-width: 0; font-size: 13px; }
.combo button { height: 100%; width: 22px; display: grid; place-items: center; }
.colorbtn { position: relative; }
.colorbtn .bar { position: absolute; left: 50%; bottom: 4px; width: 16px; height: 3px; margin-left: -8px; }
.weight b { font-family: Montserrat; font-size: 15px; }

/* ---------------- the page ---------------- */
.canvas { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 36px 24px 48px; position: relative; }
.canvas.pageless { padding: 16px 0 48px; }
.zoomer { margin: 0 auto; width: max-content; }
.sheet { position: relative; background: var(--page); color: var(--page-ink); box-shadow: var(--shadow); }
.canvas.pageless .sheet { box-shadow: none; background: transparent; }
.canvas.pageless .zoomer { width: auto; }
.canvas.pageless .mark { display: none; }
.mark { position: absolute; width: 20px; height: 20px; border: 0 solid var(--thumb); pointer-events: none; }
.page {
  outline: none; caret-color: var(--page-ink); min-height: 100%;
  font-family: Montserrat, system-ui, sans-serif; font-size: 14.667px; line-height: 1.32;
  overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; cursor: text;
}
.page p { margin: 0 0 10.667px; min-height: 1em; }
.page ul, .page ol { margin: 0 0 10.667px; padding-left: 36px; }
.page li > p { margin-top: 0; margin-bottom: 0; }
.page a { color: var(--link); }
.page img { max-width: 100%; height: auto !important; vertical-align: bottom; }
.page figure { margin: 8px 0; text-align: center; }
.page .kept { margin: 8px 0; -webkit-user-select: none; user-select: none; }
.page .kept table { border-collapse: collapse; width: 100%; }
.page .kept td { border: 1px solid #B9BDC7; padding: 3px 7px; }
.page .kept tr:first-child td { font-weight: 600; }
.page .kept:not(:has(table)) { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 12px; }
.page ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.found { background: #FDE047; color: #000; }

/* ---------------- status bar ---------------- */
.status { height: 28px; flex: none; display: flex; align-items: center; padding: 0 18px; gap: 8px; color: var(--muted); font-size: 12px; }
.status .grow { flex: 1; }
.status button { width: 22px; height: 22px; border-radius: 6px; font-size: 14px; color: var(--muted); }
.status button:hover { background: var(--hover); }
.status input[type=range] { width: 120px; accent-color: var(--muted); }
.status .pct { min-width: 44px; text-align: right; }

/* ---------------- find pane ---------------- */
.findpane { position: absolute; right: 28px; top: 14px; z-index: 20; width: 300px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.findpane .r { display: flex; gap: 4px; align-items: center; }
.findpane input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); outline: 0; padding: 0 8px; }
.findpane input:focus { border-color: var(--accent); }
.findpane small { color: var(--muted); padding: 0 2px; }

/* ---------------- menus and question cards ---------------- */
.card { background: var(--surface); border-radius: 12px; box-shadow: 0 3px 14px rgba(0, 0, 0, .16); border: 1px solid var(--line); }
.shade { position: fixed; inset: 0; z-index: 60; }
.shade.dim { background: rgba(10, 12, 18, .35); }
.menu { position: fixed; z-index: 61; min-width: 180px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow-y: auto; padding: 4px; animation: pop .12s ease-out; }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px 0 4px; border-radius: 8px; text-align: left; white-space: nowrap; }
.menu button:hover { background: var(--hover); }
.menu button .chk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.menu button.on .chk { background: var(--accent-soft); color: var(--accent); }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }
.menu .label { padding: 6px 8px 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.menu small { margin-left: auto; padding-left: 28px; color: var(--muted); font-size: 12px; }
.swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; padding: 6px 8px; }
.swatches button { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.stylegrid { display: grid; grid-template-columns: repeat(2, 150px); gap: 4px; padding: 4px; }
.stylegrid button { height: 52px; border-radius: 10px; background: var(--tile); padding: 0 12px; overflow: hidden; }
.stylegrid button.on { box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } }
.question { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); padding: 22px 22px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); animation: rise .16s ease-out; }
.question h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.question p { margin: 0 0 16px; color: var(--muted); }
.question .field { width: 100%; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); outline: 0; margin-bottom: 16px; }
.question .field:focus { border-color: var(--accent); }
.question .btns { display: flex; justify-content: flex-end; gap: 8px; }
.question dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 4px 0 16px; }
.question dt { color: var(--muted); } .question dd { margin: 0; font-weight: 600; text-align: right; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -47%); } }
.btn { height: 32px; padding: 0 16px; border-radius: 9px; background: var(--tile); font-weight: 600; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { background: var(--danger); color: #fff; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(40px + var(--safe-b)); transform: translateX(-50%); padding: 10px 16px; background: var(--ink); color: var(--app-bg); border-radius: 12px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }

/* ---------------- the File screen: a rail on the left, the section on the right ---------------- */
.filescreen { position: fixed; inset: 0; z-index: 30; background: var(--app-bg); display: flex; padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); gap: 0; animation: fileIn .22s ease-out; }
@keyframes fileIn { from { opacity: 0; transform: translateX(-28px); } }
.rail { width: 224px; flex: none; background: var(--surface); border-radius: 20px; padding: 18px 10px 12px; display: flex; flex-direction: column; overflow-y: auto; }
.rail .back { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; align-self: flex-start; }
.rail .back:hover { background: var(--hover); }
.rail h1 { font-size: 20px; font-weight: 600; margin: 18px 14px 10px; }
.nav { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; width: 100%; text-align: left; }
.nav:hover { background: var(--hover); }
.nav.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail .grow { flex: 1; }
.fmain { flex: 1; overflow-y: auto; padding: 22px 24px 24px 36px; min-width: 0; }
.fmain h2 { font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.fmain .sub { font-size: 13.5px; color: var(--muted); margin: 4px 0 22px; }
.tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.ftile { width: 150px; height: 128px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 16px; text-align: left; display: flex; flex-direction: column; }
.ftile:hover { border-color: var(--accent); }
.ftile .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: auto; }
.ftile .ic svg.i { width: 16px; height: 16px; }
.ftile b { font-size: 14px; font-weight: 600; margin-top: 10px; }
.ftile small { color: var(--muted); font-size: 12px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
.fcard { background: var(--surface); border-radius: 20px; padding: 16px 20px; }
.fcard + .fcard { margin-top: 16px; }
.fcard h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.recent .empty { color: var(--muted); padding: 2px 0 6px; }
.recent .doc { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.recent .doc:hover { background: var(--hover); }
.recent .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; text-align: left; }
.recent .open .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.recent .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent .when { color: var(--muted); font-size: 12px; }
.info { display: grid; grid-template-columns: 86px 1fr; gap: 6px 0; font-size: 13px; }
.info dt { color: var(--muted); } .info dd { margin: 0; overflow-wrap: anywhere; }
.segment { display: inline-flex; background: var(--tile); border-radius: 12px; padding: 3px; }
.segment button { padding: 5px 14px; border-radius: 9px; }
.segment button.on { background: var(--accent); color: var(--accent-ink); }
.form { display: grid; grid-template-columns: 140px auto; gap: 12px 16px; align-items: center; padding: 18px 20px; }
.form label { color: var(--muted); }
.form select, .form input[type=number] { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); padding: 0 8px; outline: 0; }
.form input[type=number] { width: 90px; }
.form .margins { display: grid; grid-template-columns: repeat(2, auto auto); gap: 8px 10px; align-items: center; justify-content: start; }
.form .margins span { color: var(--muted); }
.switch { width: 40px; height: 24px; border-radius: 12px; background: var(--thumb); position: relative; transition: background .15s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(16px); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print {
  @page { margin: 0; }
  body { overflow: visible; background: #fff; }
  .window { position: static; padding: 0; display: block; }
  .titlebar, .topcard, .status, .findpane, .filescreen { display: none !important; }
  .canvas { overflow: visible; padding: 0; }
  .zoomer { zoom: 1 !important; }
  .sheet { box-shadow: none; }
  .mark { display: none; }
}
/* sub- and superscript text is smaller, as desktop draws it (unless its size is set) */
.page [style*="vertical-align: sub"], .page [style*="vertical-align: super"], .page sub, .page sup { font-size: 0.65em; }