/* apple.css - the Apple-style look of every portal page and app (task 77, 28 Oct 2026; design standard
   77_.../docs/DESIGN_STANDARD.md). Loaded AFTER portal.css (and by apps with their own CSS, e.g. Family Folder), it only
   re-defines the colour tokens and the shapes, so every existing page changes look without touching its HTML.

   Appearance (Islam: "each App should have an option for dark/light mode"):
     <html>                      -> follows the device (prefers-color-scheme)
     <html data-theme="light">   -> always light      (My account > Appearance, saved per login on the NAS)
     <html data-theme="dark">    -> always dark
   The portal frame (shell.html) sets data-theme on itself and on every page shown in it.

   Colours are Apple's semantic system colours (iOS / macOS "systemGroupedBackground", "label", "separator" ...), the
   accent is dark blue (Islam 15 Oct: never green). Fonts: the system font stack = SF Pro on Apple devices. */

:root{
  color-scheme:light;
  --bg:#f2f2f7;            /* systemGroupedBackground */
  --card:#ffffff;          /* secondarySystemGroupedBackground */
  --card2:#f2f2f7;         /* tertiary fill (inputs, hover) */
  --line:rgba(60,60,67,.18);/* separator */
  --fg:#000000;            /* label */
  --fg2:rgba(60,60,67,.85);/* secondaryLabel (headings 2) */
  --mut:rgba(60,60,67,.6); /* secondaryLabel */
  --accent:#0a4fb4;        /* dark blue accent (light) */
  --accent2:#0a4fb4;       /* button fill */
  --accentfg:#ffffff;
  --link:#0a4fb4;
  --fill:rgba(120,120,128,.12);   /* systemFill - secondary buttons, segmented controls */
  --fill2:rgba(120,120,128,.2);
  --warn:#c26a00;--bad:#d70015;
  --bar:rgba(249,249,249,.82);    /* translucent toolbar / tab bar (material) */
  --shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04);
  --seg:#ffffff;           /* selected segment of a segmented control (54.17) */
  /* 66.16 split view (splitview.css): sidebar background, selected-row tint, Settings-app icon tiles (no green), toast, veil */
  --side:#e9e9ee;--acc-soft:rgba(10,79,180,.12);--toast:rgba(30,30,32,.94);--toastfg:#ffffff;--veil:rgba(0,0,0,.3);
  --t-blue:#0a4fb4;--t-indigo:#4b4fc4;--t-orange:#c26a00;--t-red:#d70015;--t-gray:#7c7c82;--t-purple:#8a3fc0;--t-pink:#c2185b;--t-navy:#1d3a6e;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
/* dark: the device setting, unless the person chose Light; or the person chose Dark */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#000000;--card:#1c1c1e;--card2:#2c2c2e;--line:rgba(84,84,88,.6);
  --fg:#ffffff;--fg2:rgba(235,235,245,.8);--mut:rgba(235,235,245,.6);
  --accent:#4c8dff;--accent2:#1f5fd1;--accentfg:#ffffff;--link:#6ea2ff;
  --fill:rgba(120,120,128,.24);--fill2:rgba(120,120,128,.36);
  --warn:#ff9f0a;--bad:#ff453a;--bar:rgba(28,28,30,.78);--shadow:none;--seg:#636366;
  --side:#161618;--acc-soft:rgba(76,141,255,.2);--toast:rgba(58,58,60,.96);
  --t-blue:#1f5fd1;--t-indigo:#5e5ce6;--t-orange:#e07a00;--t-red:#e0302a;--t-gray:#6c6c70;--t-purple:#a052d6;--t-pink:#d6336c;--t-navy:#2b4e8f;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;--card:#1c1c1e;--card2:#2c2c2e;--line:rgba(84,84,88,.6);
  --fg:#ffffff;--fg2:rgba(235,235,245,.8);--mut:rgba(235,235,245,.6);
  --accent:#4c8dff;--accent2:#1f5fd1;--accentfg:#ffffff;--link:#6ea2ff;
  --fill:rgba(120,120,128,.24);--fill2:rgba(120,120,128,.36);
  --warn:#ff9f0a;--bad:#ff453a;--bar:rgba(28,28,30,.78);--shadow:none;--seg:#636366;
  --side:#161618;--acc-soft:rgba(76,141,255,.2);--toast:rgba(58,58,60,.96);
  --t-blue:#1f5fd1;--t-indigo:#5e5ce6;--t-orange:#e07a00;--t-red:#e0302a;--t-gray:#6c6c70;--t-purple:#a052d6;--t-pink:#d6336c;--t-navy:#2b4e8f;
}

/* ---- base ---------------------------------------------------------------------------------------------------- */
body{background:var(--bg);color:var(--fg);font:17px/1.41 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:var(--link)}
h1{font-size:28px;font-weight:700;letter-spacing:.01em}h2{font-size:20px;font-weight:600;color:var(--fg)}
.mut,small{color:var(--mut)}

/* ---- toolbar (macOS window toolbar / iOS navigation bar): translucent material, hairline under it ---------------- */
header{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line)}
header .brand{color:var(--fg);font-weight:700}
/* the app list = a segmented control / tab strip */
header nav a{color:var(--fg2);border-radius:8px;font-weight:500}
header nav a.on{background:var(--fill2);color:var(--fg)}
header nav a:hover{background:var(--fill);color:var(--fg)}
header .who{color:var(--mut)}

/* ---- grouped lists / cards (iOS inset grouped, macOS grouped form) ------------------------------------------------ */
.card{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.tile{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--fg);
  transition:transform .12s ease,background .12s ease}
.tile:hover{border:0;background:var(--card2)}.tile:active{transform:scale(.98)}
td,th{border-bottom:.5px solid var(--line)}th{color:var(--mut);font-weight:600;font-size:13px}

/* ---- controls --------------------------------------------------------------------------------------------------- */
button,.btn{background:var(--accent2);color:var(--accentfg);border-radius:8px;font:500 15px/1.2 var(--font);padding:8px 14px}
button:hover,.btn:hover{background:var(--accent);filter:brightness(1.05)}
button.ghost,.btn.ghost,header .tsz button{background:var(--fill);color:var(--fg);border:0}
button.ghost:hover,header .tsz button:hover{background:var(--fill2)}
input,select,textarea{background:var(--card2);color:var(--fg);border:.5px solid var(--line);border-radius:8px;font-family:var(--font)}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:0}
.pill{border-radius:999px;font-weight:600;background:var(--fill2);color:var(--fg)}
.pill.ok{background:var(--accent);color:#fff}.pill.warn{background:var(--warn);color:#fff}
.pill.needs_fix,.pill.failed{background:var(--bad);color:#fff}
.err{color:var(--bad)}
body.shell>iframe{background:var(--bg)}
.fold-head::before{color:var(--accent)}.fold-head:hover{color:var(--fg)}.fold-bar a{color:var(--link)}

/* ---- Finder-style folder browser (finder.js): toolbar with views, list / icons / columns, path bar, Quick Look ---- */
.finder{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:12px 0}
.finder .fbar{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:.5px solid var(--line);background:var(--bar);flex-wrap:wrap}
.finder .fbar .seg{display:inline-flex;background:var(--fill);border-radius:8px;padding:2px}
.finder .fbar .seg button{background:transparent;color:var(--fg);padding:4px 10px;font-size:13px;border-radius:6px}
.finder .fbar .seg button.on{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.finder .fbar .title{font-weight:600;flex:1;min-width:min(120px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder .fbar input[type=search]{width:180px;padding:5px 9px;font-size:14px}
/* list view */
.finder .flist{width:100%;border-collapse:collapse;font-size:14px}
.finder .flist th{position:sticky;top:0;z-index:1;background:var(--card);box-shadow:inset 0 -.5px 0 var(--line);text-align:left;padding:6px 10px;cursor:pointer;user-select:none;white-space:nowrap}
.finder .flist th.sorted::after{content:" ▾";color:var(--mut)}.finder .flist th.sorted.up::after{content:" ▴"}
.finder .flist td{padding:6px 10px;border-bottom:0;white-space:nowrap}
.finder .flist tr:nth-child(even) td{background:color-mix(in srgb,var(--fill) 50%,transparent)}
.finder .flist tr.sel td{background:var(--accent2);color:#fff}.finder .flist tr.sel td a,.finder .flist tr.sel td .mut{color:#fff}
.finder .flist td.nm{white-space:normal;min-width:min(180px,100%)}
.finder .flist td.nm a,.finder .flist td.nm span.n{color:var(--fg);display:inline-flex;gap:8px;align-items:center}
.finder .ico{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.finder .flist td.act{text-align:right}.finder .flist td.act button,.finder .flist td.act a.btn{padding:3px 9px;font-size:12px;margin-left:4px}
@media(max-width:640px){.finder .flist td.k,.finder .flist th.k,.finder .flist td.dt,.finder .flist th.dt{display:none}}
/* icon view */
.finder .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr));gap:6px;padding:12px}
.finder .fgrid .it{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:8px;text-align:center;color:var(--fg);font-size:13px;word-break:break-word}
.finder .fgrid .it:hover{background:var(--fill)}.finder .fgrid .it.sel{background:var(--fill2)}
.finder .fgrid .it .ico{width:64px;height:64px}.finder .fgrid .it img.th{width:96px;height:64px;object-fit:cover;border-radius:6px}
.finder .fgrid .it small{display:block}
/* column view (Mac / iPad width): one column per folder level, like Finder's column view */
.finder .fcols{display:flex;overflow-x:auto;min-height:320px}
.finder .fcols .col{flex:0 0 240px;border-right:.5px solid var(--line);overflow-y:auto;max-height:60vh}
.finder .fcols .col a{display:flex;gap:8px;align-items:center;padding:5px 10px;color:var(--fg);font-size:14px}
.finder .fcols .col a.on{background:var(--accent2);color:#fff}.finder .fcols .col a:hover:not(.on){background:var(--fill)}
.finder .fcols .col a::after{content:"›";margin-left:auto;color:var(--mut)}.finder .fcols .col a.file::after{content:""}
/* path bar (Finder View > Show Path Bar) */
.finder .fpath{display:flex;gap:4px;align-items:center;padding:6px 10px;border-top:.5px solid var(--line);font-size:12px;color:var(--mut);overflow-x:auto;white-space:nowrap}
.finder .fpath a{color:var(--fg2);display:inline-flex;gap:4px;align-items:center}.finder .fpath .sep{color:var(--mut)}
.finder .fpath .ico{width:14px;height:14px}
.finder .fstat{padding:4px 10px 8px;font-size:12px;color:var(--mut);text-align:center}
/* Quick Look (space bar / eye button) */
dialog.ql{border:0;border-radius:14px;padding:0;background:var(--card);color:var(--fg);max-width:min(92vw,1100px);width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog.ql::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.ql .qh{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:.5px solid var(--line);background:var(--bar)}
dialog.ql .qh b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
dialog.ql .qb{display:flex;justify-content:center;align-items:center;background:#000;min-height:40vh;max-height:78vh}
dialog.ql .qb img,dialog.ql .qb video{max-width:100%;max-height:78vh}dialog.ql .qb iframe{width:100%;height:78vh;border:0;background:#fff}
dialog.ql .qb audio{width:80%}dialog.ql .qb .none{color:#ddd;padding:40px;text-align:center}

/* ---- app components (task 54.17, 28 Oct 2026 - Islam: "AL Ruby downloader still not following Apple Design") ------
   Shared building blocks for the portal's app pages (first user: the Downloader). Every app page uses THESE instead of
   its own colours / shapes, so a change here reaches every app. Colours only through the tokens above (Light / Dark).
     header.apptitle   large title + the app's own segmented tab strip (not the translucent window toolbar)
     .seg              segmented control (2-5 choices / tabs): grey track, the chosen segment raised (iOS / macOS)
     .grouped          an app page laid out as iOS inset-grouped forms: caption labels, full-width fields, .row / .grid /
                       .actions / .sp layout, one primary (filled) button per form, phone = one column
     .switches         every on/off checkbox inside is drawn as an iOS switch (dark-blue "on", never green)
     .rows > .item     list rows with hairline separators (downloads, torrents ...)
     .badge            status capsule: neutral; accent = running / done; orange = waiting for approval; red = failed
     .progress         thin progress bar (iOS UIProgressView) - <div class="progress"><i style="width:40%"></i></div>
     .inset            an inset box inside a card (options, estimate)
     .notice           a tinted bar with a message and its buttons (e.g. "Moving x - Paste here / Cancel")
     .outline          disclosure tree / source list (folder chooser): chevron, row, selected = accent row
     button.small / button.danger / :disabled, .khint (keyboard hints - hidden on touch screens)            */
[hidden]{display:none!important}                        /* a hidden button stays hidden (portal.css sets button display) */
main main{max-width:none;padding:0;margin:0}            /* an app's own <main> inside the portal page: no second gutter */

header.apptitle{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:2px 0 14px;margin:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;z-index:auto}
header.apptitle h1{margin:0;font-size:34px;line-height:1.2;font-weight:700;letter-spacing:.01em}
header.apptitle nav.seg{order:0;flex:0 1 auto;flex-basis:auto;gap:0}

.seg{display:inline-flex;align-items:stretch;background:var(--fill);border:0;border-radius:9px;padding:2px;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>button,.seg>a{flex:1 1 auto;background:transparent;color:var(--fg);border:0;border-radius:7px;padding:6px 16px;
  font:500 14px/1.25 var(--font);white-space:nowrap;text-align:center;box-shadow:none;filter:none}
.seg>button:hover,.seg>a:hover{background:transparent;filter:none}
.seg>button.on,.seg>a.on{background:var(--seg);color:var(--fg);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
@media(max-width:640px){header.apptitle h1{font-size:30px}header.apptitle nav.seg{flex:1 1 100%;display:flex}
  .seg>button,.seg>a{padding:6px 8px}}

button.small,.btn.small{padding:5px 11px;font-size:13px;border-radius:8px}
button.danger,.btn.danger{background:var(--fill);color:var(--bad);border:0}
button.danger:hover,.btn.danger:hover{background:var(--fill2);filter:none}
button:disabled,.btn[aria-disabled=true]{opacity:.4;cursor:default;filter:none}

.grouped{color:var(--fg)}
.grouped h3{font-size:17px;font-weight:600;margin:0 0 12px;color:var(--fg)}
.grouped label{display:block;font-size:13px;color:var(--mut);margin:0 0 4px}
.grouped label:has(>input[type=checkbox]),.grouped label:has(>input[type=radio]){display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--fg);margin:6px 0;cursor:pointer}
.grouped label.mut:has(>input){color:var(--mut)}
.grouped textarea{width:100%;min-height:96px;padding:10px 12px;font:16px/1.4 var(--font);resize:vertical}
.grouped input:not([type=checkbox]):not([type=radio]):not([type=file]),.grouped select{padding:10px 12px;font-size:16px;border-radius:10px}
.grouped input[type=file]{width:auto;padding:6px;font-size:14px}
/* pop-up buttons (select): the same height and corners as the fields, a grey chevron (works in Light and Dark) */
.grouped select{-webkit-appearance:none;appearance:none;min-height:44px;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 14px}
.grouped .rows select,.grouped select.small{min-height:30px;padding:3px 30px 3px 10px;font-size:14px;border-radius:8px;background-position:right 9px center}
.grouped .row{margin-top:12px;gap:8px 10px}
.grouped .row>input:not([type=checkbox]):not([type=radio]){flex:1 1 160px;width:auto;min-width:0}
.grouped .sp{flex:1}
.grouped .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.grouped .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.grouped .actions>button{min-width:min(180px,100%);padding:11px 20px;font-size:16px;font-weight:600;border-radius:12px}
.grouped .name{font-weight:600;word-break:break-word}
.grouped .card{padding:16px 18px}
.grouped .err{font-size:14px;margin-top:6px}.grouped .err:empty{display:none}
@media(max-width:640px){.grouped .grid{grid-template-columns:1fr}.grouped .actions>button{flex:1 1 100%;min-width:0}}

.switches input[type=checkbox],input[type=checkbox].switch{-webkit-appearance:none;appearance:none;position:relative;
  min-width:44px;max-width:44px;height:26px;flex:0 0 44px;margin:0;padding:0;border:0;border-radius:13px;background:var(--fill2);
  cursor:pointer;transition:background .2s ease;vertical-align:middle}
.switches input[type=checkbox]::before,input[type=checkbox].switch::before{content:"";position:absolute;top:2px;left:2px;
  width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .2s ease}
.switches input[type=checkbox]:checked,input[type=checkbox].switch:checked{background:var(--accent)}
.switches input[type=checkbox]:checked::before,input[type=checkbox].switch:checked::before{transform:translateX(18px)}
.switches input[type=checkbox]:disabled,input[type=checkbox].switch:disabled{opacity:.4;cursor:default}
.switches input[type=checkbox]:focus-visible,input[type=checkbox].switch:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}

.rows>.item{padding:12px 0;border-top:.5px solid var(--line)}.rows>.item:first-child{border-top:0;padding-top:4px}
.rows>.item .row{margin-top:0}.rows>.item>.mut,.rows>.item>div>.mut{margin-top:4px}
.rows>.item.ksel{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.badge{display:inline-block;padding:1px 9px;border-radius:999px;font:600 12px/1.6 var(--font);white-space:nowrap;
  background:var(--fill);color:var(--fg2)}
.badge.ok,.badge.done,.badge.complete,.badge.running,.badge.starting,.badge.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.badge.warn,.badge.approval{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}
.badge.bad,.badge.failed,.badge.error,.badge.cancelled,.badge.rejected,.badge.removed{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}

.progress{height:5px;background:var(--fill2);border-radius:3px;overflow:hidden;margin:8px 0 4px}
.progress>i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease}

.inset{background:var(--card2);border-radius:10px;padding:14px 16px;margin-top:14px}
.inset table{margin-top:8px}

.notice{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;width:100%;padding:10px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--fg)}

.treehead{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;font-size:15px}
.treehead b{color:var(--fg);font-weight:600}.treehead .ico{width:18px;height:18px;vertical-align:-3px}
.outline{background:var(--card2);border-radius:10px;padding:4px;margin-top:8px;max-height:360px;overflow:auto}
.outline .trow{display:flex;align-items:center;gap:2px;min-height:36px}
.outline .tarr{background:none;border:0;color:var(--mut);width:28px;height:28px;flex:0 0 28px;padding:0;font-size:12px;
  line-height:1;border-radius:6px}
.outline .tarr:hover{background:var(--fill);color:var(--fg);filter:none}
.outline .tn{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer;padding:6px 10px;border-radius:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.outline .tn:hover{background:var(--fill)}
.outline .tn.sel{background:var(--accent2);color:#fff;font-weight:600}
.outline .tn.kcur{box-shadow:0 0 0 2px var(--accent)}
.outline .tkids{margin-left:14px;padding-left:8px;border-left:.5px solid var(--line)}
.outline .ico,.rows .ico{width:18px;height:18px;flex:0 0 18px;vertical-align:-3px}

.khint{font-size:12px;color:var(--mut);margin:0 0 12px}
.khint kbd{font:inherit;padding:0 5px;border-radius:4px;background:var(--fill);border:0}
@media (hover:none) and (pointer:coarse){.khint{display:none}}   /* iPhone / iPad without a keyboard: no key hints */

/* phone: "stack" tables (portal.css) show each cell's caption (data-l) in front of its value */
@media(max-width:640px){table.stack td[data-l]:not([data-l=""]){display:flex;gap:10px}
  table.stack td[data-l]:not([data-l=""])::before{content:attr(data-l);color:var(--mut);min-width:96px;flex:0 0 96px}}
/* Finder window on a narrow screen (54.18, Islam on the iPhone: "Rename ..." ran off the right edge; replaces 54.17's
   wrapping buttons): the window measures ITS OWN width (container query - a Finder inside a card or a split view counts
   too); below 700px each row's buttons (.racts) fold into one "⋯" button that opens the action sheet (finder.js), the
   toolbar becomes title on its own line, then the view switch + search side by side. Old browsers: the 640px media query. */
.finder{container-type:inline-size;container-name:finder}
.finder .flist td.act{width:1%}
.finder .flist .more{display:none;padding:2px 10px;font-size:18px;line-height:1.1;letter-spacing:.05em;border-radius:14px}
@container finder (max-width:700px){
  .finder .flist .racts{display:none}.finder .flist .more{display:inline-block}
  .finder .flist td.k,.finder .flist th.k,.finder .flist td.dt,.finder .flist th.dt{display:none}
  .finder .flist td.nm{min-width:0;overflow-wrap:anywhere}.finder .flist td{padding:7px 8px}
  .finder .flist td.mut{white-space:normal;font-size:12px}
  .finder .fbar .title{order:-1;flex:1 1 100%;font-size:17px}
  .finder .fbar input[type=search]{flex:1 1 100px;width:auto;min-width:0}
  .finder .fbar .seg button{padding:4px 8px}}
@supports not (container-type:inline-size){@media(max-width:640px){.finder .flist .racts{display:none}.finder .flist .more{display:inline-block}}}
/* the action sheet of a row (iOS UIAlertController .actionSheet): grouped buttons at the bottom, Cancel apart, dark-blue
   text, Delete in red; on a wide screen the same sheet in the middle */
dialog.fsheet{border:0;padding:0 8px 8px;background:transparent;color:var(--fg);width:min(420px,100vw);max-width:100vw;
  margin:auto auto 0;box-shadow:none;overflow:visible}
@media(min-width:min(701px,100%)){dialog.fsheet{margin:auto}}
dialog.fsheet::backdrop{background:rgba(0,0,0,.35)}
dialog.fsheet .grp{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog.fsheet .grp+.grp{margin-top:8px}
dialog.fsheet h4{margin:0;padding:12px 16px;font:600 13px/1.35 var(--font);color:var(--mut);text-align:center;overflow-wrap:anywhere}
dialog.fsheet .grp button,dialog.fsheet .grp p{display:block;width:100%;margin:0;padding:15px 16px;background:transparent;
  color:var(--accent);font:400 18px/1.2 var(--font);text-align:center;border:0;border-top:.5px solid var(--line);border-radius:0}
dialog.fsheet .grp p{color:var(--mut);font-size:15px}
dialog.fsheet .grp button:hover,dialog.fsheet .grp button:focus-visible{background:var(--fill);filter:none;outline:0}
dialog.fsheet .grp button.danger{color:var(--bad)}
dialog.fsheet .grp+.grp button{border-top:0}dialog.fsheet button.cancel{font-weight:600}
/* folder chooser (54.18, 54.18b): the Downloader's "Save to" is the SAME Finder window as Family Videos - no look of its own,
   no inner scroll box (0.32.4 had one: its sticky Name / Date header slid over the folder rows); only the "Saving here" mark
   in its status line is accented. The tools row above it (name field + Create) is the Family Videos one. */
.finder.pick{margin:8px 0 0;box-shadow:0 0 0 .5px var(--line),var(--shadow)}   /* outlined: it sits on a white card, not on the page */
.finder .fstat .here{color:var(--accent);font-weight:600}
.dlv .ftools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.dlv .ftools input{flex:1 1 200px;min-width:0;width:auto}
.treehead .tmk:disabled{opacity:.4}
/* Downloads list: subscription videos grouped per channel (54.18, portal 0.32.5, vgroups.js) - a Finder / Settings disclosure
   row: chevron, channel name, "n videos · size · date" in grey; the rows of the channel indented under it when open */
.rows>.vgall{margin:0 0 6px;gap:8px}.rows>.vgall .mut{font-size:13px}
.rows>.vgrp{border-top:.5px solid var(--line)}.rows>.vgrp:first-child,.rows>.vgall+.vgrp{border-top:0}
.rows>.vgrp>.vgh{display:flex;align-items:baseline;gap:10px;width:100%;padding:12px 4px;margin:0;background:transparent;color:var(--fg);
  border:0;border-radius:8px;text-align:left;font:600 16px/1.3 var(--font);flex-wrap:wrap}
.rows>.vgrp>.vgh:hover{background:var(--fill);filter:none}
.rows>.vgrp>.vgh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rows>.vgrp>.vgh .chev{color:var(--accent);width:1em;flex:0 0 1em;text-align:center}
.rows>.vgrp>.vgh .vgm{font-weight:400;font-size:13px;margin-left:auto}
.rows>.vgrp>.vgb{padding:0 0 4px 22px}.rows>.vgrp>.vgb>.item{padding:10px 0;border-top:.5px solid var(--line)}
@media(max-width:640px){.rows>.vgrp>.vgh .vgm{margin-left:calc(1em + 10px);flex-basis:100%}.rows>.vgrp>.vgb{padding-left:8px}}

/* ---- page sheet (task 76.01, 29 Oct 2026 - Islam: "I am expecting the folder layout is following Apple Design") ------
   An iOS / macOS sheet over the page for a short task (first user: Udemy "Save <course> to…" with the Finder chooser):
   title bar Cancel | title | Save (accent, bold), the content on the grouped background below it. iPhone: slides up from
   the bottom at the LARGE detent (92% of the screen) with a grabber, top corners rounded; wider: a centred sheet. Only
   the sheet's body scrolls; the Finder window inside keeps no scroll box of its own (54.18b).
   <dialog class="psheet"><div class="psbar"><button class="link" data-x>Cancel</button><b>Title</b>
   <button class="link strong" data-ok>Save</button></div><div class="psbody">...</div></dialog>                      */
dialog.psheet{border:0;padding:0;margin:auto;width:min(820px,94vw);max-width:94vw;max-height:88vh;border-radius:14px;
  background:var(--bg);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;flex-direction:column}
dialog.psheet[open]{display:flex}
dialog.psheet::backdrop{background:rgba(0,0,0,.4)}
dialog.psheet .psbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 14px 10px;
  background:var(--bar);border-bottom:.5px solid var(--line);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
dialog.psheet .psbar b{font-size:17px;font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
dialog.psheet .psbar button{background:transparent;color:var(--accent);border:0;padding:4px 2px;font-size:17px;box-shadow:none;filter:none}
dialog.psheet .psbar button:hover{background:transparent;filter:none;opacity:.7}
dialog.psheet .psbar [data-x]{justify-self:start}dialog.psheet .psbar [data-ok]{justify-self:end;font-weight:600}
dialog.psheet .psbar [data-ok]:disabled{opacity:.35}
dialog.psheet .psbody{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 20px;flex:1 1 auto}
dialog.psheet .psbody .finder{margin-top:10px}
@media(max-width:640px){
  dialog.psheet{width:100vw;max-width:100vw;height:92vh;max-height:92vh;margin:auto 0 0;border-radius:12px 12px 0 0}
  dialog.psheet::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--fill2)}
  dialog.psheet .psbar{padding-top:16px}}
/* ---- long file paths never widen the page (task 76.02, 29 Oct 2026) ------------------------------------------------
   WHY: Admin > Layout reports (layoutreport.js) caught it on Islam's iPhone (428 px): the Family Safe film table's links
   "_01_Winter_Sonata_Series/01_Winter_Sonata_Episode_..." have no spaces, so with overflow-wrap:normal the cell could not
   be narrower than the whole path - scrollWidth 745 px, the page panned sideways (also in narrow Mac / iPad windows).
   overflow-wrap:anywhere (unlike break-word) also lowers the cell's MINIMUM width, so the table layout itself can shrink.
   Generic, for every portal table / list with paths (Family Safe, Downloader, Family Videos, Ruby Plex admin, Udemy):
   - a cell marked as a path (td.path / .path / code) and links / small notes inside cells may break anywhere;
   - list rows (.rows > .item) and their grey lines wrap long names;
   - on a phone (<= 640 px) EVERY table cell may break anywhere (a squeezed table must never be wider than the screen);
   - tables never get wider than their box; buttons, capsules and pills keep their words whole. */
td.path,.path,td a,td small,td code,td .mut{overflow-wrap:anywhere}
table{max-width:100%}
.rows>.item,.rows>.item .mut,.rows>.item .name,.rows>.item .fold{overflow-wrap:anywhere;min-width:0}
td button,td .btn,td .badge,td .pill,td .st{overflow-wrap:normal}
@media(max-width:640px){td,th{overflow-wrap:anywhere}table.stack td.path{font-weight:600}}
/* ---- 54.29 (6 Nov 2026): dates stay whole, wide text tables scroll in their own box (web/static/fitwidth.js) -------
   WHY: Islam's iPhone (A+): Health > History showed "202 / 6- / 10- / 29 / 18:0 / 5" - the phone rule above let the date cell
   break anywhere, so the long message beside it took all the width. fitwidth.js marks every date / time cell "dt" on every
   page: it never breaks and takes only the width it needs (width:1%); the other cells wrap. Business chat panned sideways
   because of a wide markdown table: tables in written text (.gd / .ch / .md) sit in a "tscroll" box that scrolls by itself. */
td.dt,th.dt{white-space:nowrap;overflow-wrap:normal;word-break:normal;width:1%}
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll>table{max-width:none}
.ch,.ch .gd,.gd{min-width:0;overflow-wrap:anywhere}
.ch pre,.gd pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
/* 54.29: large text (A+ / zoom 1.6) on a phone: grid tiles and cards may shrink to the screen, long words wrap; segmented
   tabs that do not fit wrap onto a second line instead of pushing the page wider (Ruby Shield, Guides, Ruby Guard). */
.tiles{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
.tile,.card{min-width:0;overflow-wrap:break-word}
@media(max-width:640px){main nav.seg:not(header.apptitle nav.seg){display:flex;flex-wrap:wrap;overflow-x:visible}
  main nav.seg:not(header.apptitle nav.seg)>a,main nav.seg:not(header.apptitle nav.seg)>button{padding:6px 10px}}

/* ---- 54.24 arrange: each person's own order of the menu and of cards (web/static/reorder.js, core/prefs.py) ------------
   iOS "Edit" list: Edit -> rows with a drag handle, Move up / down, Hide / Show; Cancel / Done; no jiggle. */
[data-ro-hidden]{display:none!important}
.ro-away{display:none!important}
.ro-bar{display:flex;justify-content:flex-end;margin:2px 0 4px}
.ro-bar[hidden]{display:none!important}
.ro-bar .ro-edit{background:transparent;color:var(--link);padding:4px 6px;font:500 15px/1.2 var(--font)}
.ro-bar .ro-edit:hover{background:var(--fill);filter:none}
.ro-panel{margin:4px 0 16px;min-width:0}
.ro-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.ro-head .ro-ttl{flex:1;text-align:center;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-head .ro-cancel{background:transparent;color:var(--link);padding:8px 6px}
.ro-head .ro-cancel:hover{background:var(--fill);filter:none}
.ro-head .ro-done{font-weight:600;min-width:72px}
.ro-list{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ro-row{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 4px;border-top:.5px solid var(--line);background:var(--card);
  color:var(--fg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y;min-height:44px}
.ro-row:first-child{border-top:0}
.ro-row .ro-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-row.off .ro-t{opacity:.45}
.ro-row button{background:var(--fill);color:var(--fg);padding:0 10px;min-width:40px;height:36px;border-radius:8px;font:500 15px/1 var(--font);flex:0 0 auto}
.ro-row button:hover{background:var(--fill2);filter:none}
.ro-row button:disabled{opacity:.3;cursor:default}
.ro-row .ro-hide{min-width:62px}
.ro-row .ro-hide[aria-pressed="true"]{background:var(--accent2);color:var(--accentfg)}
.ro-handle{cursor:grab;touch-action:none;font-size:22px;line-height:1;color:var(--mut);padding:7px 8px;min-width:40px;text-align:center;flex:0 0 auto}
.ro-row.drag{position:relative;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.28);transform:scale(1.02);border-radius:10px}
.ro-list.dragging,.ro-list.dragging *{cursor:grabbing}
.ro-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 4px 0}
.ro-foot .ro-hint{font-size:13px;color:var(--mut)}
.ro-foot .ro-reset{background:transparent;color:var(--bad);padding:6px 0;font-weight:500}
.ro-foot .ro-reset:hover{background:transparent;filter:none;text-decoration:underline}
.ro-live{font-size:13px;color:var(--mut);min-height:1.2em;margin:6px 4px 0}
header nav .nav-edit{background:transparent;color:var(--link);padding:6px 10px;font:500 14px/1.2 var(--font);white-space:nowrap;flex:0 0 auto;border-radius:8px}
header nav .nav-edit:hover{background:var(--fill);filter:none}
/* Family Videos search + download in the Finder window (54.25, finder.js). Only theme variables: Light / Dark come by themselves. */
.finder .fbar .fselb{padding:4px 10px;font-size:13px;border-radius:8px}.finder .fbar .fselb.on{background:var(--accent2);color:#fff}
.finder .fscope{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:6px 10px;border-bottom:.5px solid var(--line);background:var(--bar);font-size:13px}
.finder .fscope[hidden],.finder .fselbar[hidden]{display:none}
.finder .fscope .seg{display:inline-flex;background:var(--fill);border-radius:8px;padding:2px}
.finder .fscope .seg button{background:transparent;color:var(--fg);padding:4px 10px;font-size:13px;border-radius:6px}
.finder .fscope .seg button.on{background:var(--accent)!important;color:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.finder .fkind{display:inline-flex;gap:6px;align-items:center;color:var(--mut)}.finder .fkind select{width:auto;padding:4px 8px;font-size:13px}
.finder .fdates{display:inline-flex;gap:6px;align-items:center;color:var(--mut)}.finder .fdates[hidden]{display:none}.finder .fdates input{width:auto;padding:3px 6px;font-size:13px}
.finder .floc,.finder .flist td.nm a.floc{display:block;margin:2px 0 0 28px;font-size:12px;color:var(--mut);overflow-wrap:anywhere}.finder .floc:hover,.finder .flist td.nm a.floc:hover{color:var(--link);text-decoration:underline}
.finder .fempty{padding:44px 16px;text-align:center;color:var(--mut)}
/* Icons: a wrapper holds the link and, beside it, the "⋯" of the row's actions (the buttons themselves only in the sheet) */
.finder .fgrid .itw{position:relative;display:flex;flex-direction:column;min-width:0}.finder .fgrid .itw .it{flex:1}
.finder .fgrid .itw .racts{display:none}
.finder .fgrid .itw .more{position:absolute;top:4px;right:4px;padding:1px 8px;font-size:15px;line-height:1.2;border-radius:12px;background:var(--fill);color:var(--fg)}
.finder .fgrid .floc{margin:0 4px 6px;text-align:center}
/* Select mode: a round tick before each item, dark blue when chosen; a tap ticks instead of opening (finder.js) */
.finder .fchk{display:none;width:20px;height:20px;flex:0 0 auto;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mut);vertical-align:middle;margin-right:8px;position:relative}
.finder.selecting .fchk{display:inline-block}
.finder .chosen .fchk{background:var(--accent2);box-shadow:none}
.finder .chosen .fchk::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.finder .flist tr.chosen td{background:color-mix(in srgb,var(--accent) 16%,transparent)}.finder .fgrid .it.chosen,.finder .fcols .col a.chosen{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.finder .fgrid .fchk{position:absolute;top:8px;left:8px;margin:0}.finder.selecting .fgrid .more,.finder.selecting .flist .act{visibility:hidden}
.finder .fselbar{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-top:.5px solid var(--line);background:var(--bar)}
.finder .fselbar .fseln{flex:1 1 140px;font-size:13px;color:var(--fg2)}.finder .fselbar button{padding:6px 12px;font-size:13px}.finder .fselbar button:disabled{opacity:.45}
/* Columns while searching: the results and, beside them, the selected one */
.finder .fcols .fprev{flex:1 1 280px;min-width:min(240px,100%);padding:16px;font-size:13px}.finder .fcols .fprev h4{margin:10px 0;font-size:15px;overflow-wrap:anywhere}
.finder .fcols .fprev a::after{content:""}.finder .fcols .fprev .fp-pic{text-align:center}.finder .fcols .fprev .fp-pic .ico{width:96px;height:96px}.finder .fcols .fprev .fp-pic img{max-width:100%;max-height:220px;border-radius:8px}
.finder .fcols .fprev dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 12px}.finder .fcols .fprev dt{color:var(--mut)}.finder .fcols .fprev dd{margin:0;overflow-wrap:anywhere}.finder .fcols .fprev .floc{margin:0;padding:0;display:inline}.finder.selecting .fchk+a{display:inline-flex}
.finder .fcols .fprev .fp-acts{display:flex;flex-wrap:wrap;gap:6px}.finder .fcols .fprev .fp-acts a{display:inline-flex;padding:4px 10px}.finder .fcols .fprev .fp-acts button{padding:4px 10px;font-size:13px}
.finder .flist td.act a.btn{white-space:nowrap}
.ftoast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);transform:translate(-50%,12px);max-width:min(90vw,520px);padding:10px 16px;border-radius:12px;background:var(--card);color:var(--fg);box-shadow:0 10px 40px rgba(0,0,0,.3);border:.5px solid var(--line);font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.ftoast.on{opacity:1;transform:translate(-50%,0)}
/* R38 (94.01): settings forms: label, control, help line; lists with Add / Remove; a closed Technical part. form.py draws them. */
.sf{display:grid;gap:4px;padding:8px 0;border-bottom:1px solid var(--line)}.sf-l{font-weight:600}.sf-h{font-size:12px}
.sf input[type=number],.sf-num input[type=number]{max-width:160px}.sf-num{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sf-time{max-width:130px}.sf select{max-width:380px}
.sf-ticks{display:flex;flex-wrap:wrap;gap:6px 14px}.sf-tick{display:inline-flex;align-items:center;gap:6px}.sf-tick input{width:auto}
.sf-fold .sf-ticks{display:grid;grid-template-columns:repeat(3,auto);gap:4px 10px;min-width:min(210px,100%)}.sf-fold .sf-tick{white-space:nowrap;font-size:13px}
.sf-rows{display:grid;gap:6px}.sf-row{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr)) auto;gap:6px;align-items:center}.sf-add{justify-self:start}
.sf-tech{margin-top:10px}.sf-tech>summary{cursor:pointer;color:var(--mut);font-size:13px;padding:6px 0}
@media (max-width:640px){.sf-row{grid-template-columns:minmax(0,1fr) auto}.sf-row input{grid-column:1}.sf-row button{grid-column:2;grid-row:1}}
/* 54.28: one panel per save to a chosen place (finder.js): name, how far, Cancel. Above the message, only theme variables. */
.fsaves{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column;gap:8px;width:min(92vw,380px);z-index:60}
.fsave{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--card);color:var(--fg);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.fsave b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.fsave span{grid-column:1;font-size:12px;color:var(--mut)}.fsave button{grid-row:1 / span 2;grid-column:2;padding:4px 10px;font-size:13px}

/* 66.17: the Family Videos Trash button - a small icon beside its label, like every other toolbar button (Apple style) */
.trashb{display:inline-flex;align-items:center;gap:6px}.trashb .ico{width:16px;height:16px;flex:0 0 16px}