/* Portal theme (task 54): dark navy, blue accent, never green (Islam 15 Oct). Phone first: 16px gutters, no side scroll. */
:root{--bg:#0b1020;--card:#121a2b;--line:#1f2a40;--fg:#e6ebf3;--mut:#99a3b3;--accent:#3B82F6;--accent2:#1F3864;--warn:#F0A020;--bad:#E5484D}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif}
a{color:#9fc0ff;text-decoration:none}
header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
header .brand{font-weight:700;font-size:18px;color:var(--fg)}
header nav{display:flex;gap:4px;overflow-x:auto;flex:1}
header nav a{padding:6px 10px;border-radius:8px;white-space:nowrap;color:var(--mut)}
header nav a.on,header nav a:hover{background:var(--card);color:var(--fg)}
header .who{color:var(--mut);font-size:14px;white-space:nowrap}
main{max-width:1100px;margin:0 auto;padding:16px}
h1{font-size:24px;margin:8px 0 16px}h2{font-size:18px;margin:24px 0 8px;color:#cfd8e6}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--fg);display:block}
.tile:hover{border-color:var(--accent)}.tile .ic{font-size:30px;display:block;margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
button,.btn{background:var(--accent2);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;display:inline-block}
button:hover,.btn:hover{background:var(--accent)}
input,select{background:#0e1626;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:16px;width:100%}
/* 66.17 (Islam's iPhone, Downloader > Add videos, 10 Nov 2026: the whole page panned sideways, ~650 px on a 390 px screen).
   ROOT CAUSE: the rule above gave EVERY input width:100% - also checkboxes and radio buttons. A segmented control hides its
   radio buttons (position:absolute; opacity:0); an absolute box with width:100% takes the width of the nearest positioned
   ancestor (here the whole screen) and starts where its label starts, so two invisible 390 px radios reached 483 and 646 px
   and made the page wider than the screen. Checkboxes and radios keep their own size on every page; text fields still
   fill their row. The automated check (portal/tools/overflow_check.py, tests/test_no_sideways_scroll.py) keeps it so. */
input[type=checkbox],input[type=radio]{width:auto}
.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:700;color:#fff;background:#8A94A6}
.pill.ok{background:var(--accent)}.pill.warn{background:var(--warn)}.pill.needs_fix,.pill.failed{background:var(--bad)}
.mut{color:var(--mut);font-size:13px}.err{color:var(--bad)}
.login{max-width:360px;margin:12vh auto;padding:0 16px}.login form{display:grid;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row form{display:inline}
@media(max-width:640px){header .who{display:none}td.hide-s,th.hide-s{display:none}}
/* phone fixes (16 Oct render check): header wraps, wide tables scroll inside their card, action buttons stack */
header{flex-wrap:wrap}header nav{order:3;flex-basis:100%}
.card{overflow-x:auto}
td.actions{white-space:nowrap}td.actions form{display:block;margin:0 0 6px}td.actions button{width:100%;padding:6px 10px}
@media(min-width:641px){header nav{order:0;flex-basis:auto}td.actions form{display:inline;margin:0 4px 0 0}td.actions button{width:auto}}
/* phone: rows of "stack" tables become blocks (no side scrolling): header row hidden, cells one under the other */
@media(max-width:640px){table.stack tr:first-child:has(th){display:none}table.stack tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
table.stack td{display:block;border:0;padding:2px 0}table.stack td.actions form{display:inline-block;margin:6px 6px 0 0}table.stack td.actions button{width:auto}}
@media(max-width:640px){table.stack{display:block;width:100%}table.stack tbody{display:block}main{padding:12px}}
/* one address (17 Oct): the portal page holds every app in a frame under its menu; inside the frame a page's own menu
   bar and footer are hidden (frame.js marks it "framed") */
.framed body>header,.framed body>footer{display:none}
body.shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.shell>header{position:static;flex:0 0 auto}
body.shell>iframe{flex:1 1 auto;min-height:0;width:100%;border:0;display:block;background:var(--bg)}
/* collapse / expand of long pages (collapse.js, 17 Oct) */
.fold-head{cursor:pointer;user-select:none}.fold-head::before{content:"▾ ";color:var(--accent)}
.fold-head.folded::before{content:"▸ "}.fold-head:hover{color:#fff}.fold-bar{margin:0 0 8px}.fold-bar a{color:#9fc0ff}

/* 54.03 search box in the menu bar; the Search link is only for the Portal app's sidebar (it reads header nav a) */
header nav a.only-app{display:none}
header .srch{flex:0 1 220px;margin:0}header .srch input{padding:6px 10px;font-size:14px}
@media(max-width:640px){header .srch{order:2;flex:1 1 140px}}
/* 0.21.0 (task 57.04, R30): A- / A+ text size in the menu bar of the frame */
header .tsz{display:flex;gap:4px;white-space:nowrap}header .tsz button{padding:4px 8px;font-size:13px;background:var(--card);border:1px solid var(--line)}

/* 54.14 (0.31.40): a form is being sent in place (inplace.js) - show it is working, no page reload */
html.inplace-busy, html.inplace-busy * { cursor: progress; }

/* 0.36.1 (Islam 7 Nov): ranked lists (Most blocked / Top sites) - long site names wrap, the number column stays one line */
table.rank td:first-child{overflow-wrap:anywhere;word-break:break-word}table.rank td+td{white-space:nowrap;text-align:right;width:1%;padding-left:12px}
table.hist td{overflow-wrap:anywhere}