/* Bancroft PTO systems hub. PTO navy and gold, as on the link pages. Mobile first. */
:root{
  --navy:#172747;
  --gold:#d8b44a;
  --gold-soft:#f5ecd2;
  --bg:#f6f3ec;
  --card:#ffffff;
  --line:#e4dccb;
  --muted:#4f5b70;
  --row:#faf8f3;
  /* Since Oct 10 (Part 12) every color the dark theme changes is a variable; these light values are the
     colors the page always had. The dark values are in /shared/av-prefs.css. */
  --text:#172747;
  --link:#172747;
  --edge:#172747;
  --hover-bg:#172747;
  --hover-text:#fff;
  --hover-es:#e8ecf4;
  --on-gold:#172747;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--link)}

/* Two languages: English bold first, Spanish gray and smaller beneath. */
.en{display:block;font-weight:700}
.es{display:block;color:var(--muted);font-size:max(.88rem,.94em);font-weight:400;margin-top:1px}
.prose .en{font-weight:400}

/* Header */
.top{background:var(--navy);color:#fff;text-align:center;padding:26px 16px 22px;border-bottom:5px solid var(--gold)}
.top img{width:96px;height:96px;display:block;margin:0 auto 12px;border-radius:50%}
.top h1{margin:0;font-size:1.45rem;line-height:1.25}
.top h1 .es{color:#e8ecf4;font-size:1rem;margin-top:3px}
.top h1 .org{display:block}
.top .av{color:var(--gold)}
.top .acr{font-weight:500;opacity:.85}
.top h1 .org{font-size:clamp(1.3rem,5.9vw,2.15rem);line-height:1.15}
.top h1 .hubline{display:block;font-size:clamp(.9rem,4.15vw,1.6rem);font-weight:600;margin-top:4px}
.top .es-lines .es-name .org{font-size:clamp(1.05rem,5.1vw,1.3rem)}
.top .es-lines .es-name .hubline{display:block;font-size:clamp(.85rem,3.9vw,1rem)}
.top .tagline{margin:8px 0 0;font-size:clamp(.85rem,4.1vw,1.4rem);font-style:italic}
.top .tagline .en{font-weight:400}
.top .es-lines{max-width:620px;margin:10px auto 0}
.top .es-lines .es{color:#d3d9e4;margin-top:2px}
.top .es-lines .org{display:block}
.top .es-lines .es-name{font-size:1.12rem}
.top .es-lines .es-tag{font-size:clamp(.8rem,3.5vw,.92rem);font-style:italic;margin-top:6px}
.top .panel{margin:18px 0 0;font-size:1.35rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.top .panel .es{color:#d3d9e4;font-size:.95rem;letter-spacing:.1em;margin-top:2px}
.top .sub{max-width:620px;margin:12px auto 0;font-size:.95rem}
.top .sub .en{font-weight:400}
.top .sub .es{color:#d3d9e4}

main{max-width:1040px;margin:0 auto;padding:18px 16px 8px}

/* How to read the page */
.key{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 18px;font-size:.92rem}
.key p{margin:8px 0}
.key .en{font-weight:400}
.key b{font-weight:700}
.key a.add{font-weight:700;text-underline-offset:2px}
.key .es a.add{color:var(--muted)}

/* Cards */
.grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--edge);border-radius:16px;padding:16px 16px 14px;min-width:0}
.card.wide{grid-column:1/-1}
.card.planned{border-top-color:#9aa3b2}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card h2{margin:0;font-size:1.15rem;line-height:1.25}
.card h2 .es{font-size:.88rem;margin-top:2px}

.badge{flex:none;display:inline-block;border-radius:999px;padding:3px 10px;font-size:.88rem;font-weight:800;letter-spacing:.08em;line-height:1.3;text-align:center}
.badge.demo{background:var(--gold);color:var(--on-gold)}
.badge.planned{background:transparent;color:var(--muted);border:1.5px dashed #9aa3b2}
.badge.planned .es{font-size:.88rem;letter-spacing:.06em;font-weight:500;margin:0}

.demoline{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--gold-soft);font-size:.88rem}
.demoline .en{font-weight:400}

.desc{margin:12px 0 4px;font-size:.95rem}
.desc .es{margin-top:4px}

.card h3{margin:16px 0 6px;font-size:.88rem;letter-spacing:.07em;text-transform:uppercase}
.card h3 .es{text-transform:none;letter-spacing:0;font-size:max(.88rem,.92em)}

a.link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:9px 12px 9px 12px;border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:11px;background:var(--row);text-decoration:none;color:var(--text);min-height:48px;overflow-wrap:anywhere}
a.link .t{min-width:0}
a.link .t .en{font-size:.96rem}
a.link .t .es{font-size:.88rem}
a.link .go{flex:none;font-weight:700;opacity:.55}
a.link:hover,a.link:focus-visible{background:var(--hover-bg);border-color:var(--hover-bg);border-left-color:var(--gold);color:var(--hover-text);outline:none}
a.link:hover .es,a.link:focus-visible .es{color:var(--hover-es)}
a.link:focus-visible{box-shadow:0 0 0 3px var(--gold)}

.links.two a.link{margin:0 0 8px}
.note{margin:2px 0 8px;padding:8px 10px;border-radius:10px;border:1.5px dashed var(--line);font-size:.88rem}
.note .en{font-weight:400}

.status{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:.88rem}
.status .en{font-weight:400}
.status b{font-weight:700}

.steps{margin:4px 0 0;padding:0;list-style:none}
.steps li{margin:0 0 8px;padding:0 0 0 14px;border-left:3px solid var(--gold);font-size:.92rem}

footer{max-width:1040px;margin:0 auto;padding:14px 16px 36px;text-align:center;font-size:.88rem}
footer .en{font-weight:400}

@media (min-width:860px){
  .top{padding:32px 16px 26px}
  .top h1{font-size:1.7rem}
  .wide .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .links.two{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
  .links.two a.link{padding:8px 10px}
}

/* ---------------------------------------------------------------- Part 12, pass 1 (Oct 10)
   The public pages card, the collapsed cards, and the page's part of the dark and language rules. The controls,
   the dark palette and the general language rules are in /shared/av-prefs.css; the script that sets data-theme,
   data-lang, data-lead and data-view on <html> is /shared/av-prefs.js. With scripts off none of the
   html[data-...] rules below apply and the page is the one above. */

/* The controls sit in the header's top right corner on a wide screen (av-prefs.css) */
.top{position:relative}

/* Public pages: compact boxed links with the description inside the box; three across on a laptop, two on a
   tablet, one on a phone */
.public{margin:0 0 18px}
.pub-links{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
@media (min-width:600px){.pub-links{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.pub-links{grid-template-columns:1fr 1fr 1fr}}
a.link.pub{margin:0;padding:7px 10px;align-items:flex-start;min-height:44px}
a.link.pub .t .en{font-size:.94rem}
a.link.pub .t .es{font-size:.88rem}
a.link.pub .d{display:block;margin-top:4px}
a.link.pub .d .en{font-weight:400;font-size:.88rem}
a.link.pub .d .es{font-size:.88rem}
a.link.pub .go{align-self:center}

/* Collapsed cards: the title, the first sentence and the badge; a tap or click on them opens the card */
details.card > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start;
  list-style:none;cursor:pointer;border-radius:10px}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::marker{content:""}
details.card > summary h2{grid-column:1;grid-row:1}
details.card > summary .badge{grid-column:2;grid-row:1}
details.card > summary .lead{display:block;grid-column:1;grid-row:2;margin:10px 0 0}
details.card > summary::after{content:"";grid-column:2;grid-row:2;justify-self:center;align-self:end;width:9px;height:9px;
  margin:0 0 7px;border-right:2.5px solid var(--text);border-bottom:2.5px solid var(--text);transform:rotate(45deg);opacity:.65}
details.card[open] > summary::after{transform:rotate(-135deg);margin-bottom:2px}
details.card > summary:hover h2 .en,details.card > summary:hover h2 .es{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
details.card > summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
details.card > .desc.more{margin-top:8px}

/* One language only */
html[data-lang="en"] .top .es-lines{display:none}
html[data-lang="es"] .top h1,html[data-lang="es"] .top .tagline{display:none}

/* Spanish leading (Español, or Both with Spanish on top): Spanish takes the English style and place, English
   moves beneath in gray. The header (spec H): the Spanish block takes the top and the larger sizes, the English
   block moves beneath in gray; each line still on one line on a phone, the title line the widest, the hub line
   larger than the tagline. */
html[data-lead="es"] .top{display:flex;flex-direction:column}
html[data-lead="es"] .top > .av-controls{order:-3}
html[data-lead="es"] .top > img{order:-2}
html[data-lead="es"] .top .es-lines{order:-1;max-width:none;margin:0}
html[data-lead="es"] .top h1{margin-top:12px}
html[data-lead="es"] .top .es-lines .es{color:#fff;margin-top:0}
html[data-lead="es"] .top .es-lines .es-name .org{font-size:clamp(1.05rem,4.75vw,2.15rem);font-weight:700;line-height:1.15}
html[data-lead="es"] .top .es-lines .es-name .hubline{font-size:clamp(.78rem,3.55vw,1.6rem);font-weight:600;line-height:1.25;margin-top:4px}
html[data-lead="es"] .top .es-lines .es-tag{font-size:clamp(.74rem,3.3vw,1.4rem);font-weight:400;margin-top:8px}
html[data-lead="es"] .top h1 .en{color:#d3d9e4;font-weight:400;font-size:1em;margin:0}
html[data-lead="es"] .top h1 .org{font-size:clamp(1rem,4.65vw,1.3rem)}
html[data-lead="es"] .top h1 .hubline{font-size:clamp(.66rem,3.05vw,.85rem);font-weight:400;margin-top:2px}
html[data-lead="es"] .top .tagline{font-size:clamp(.62rem,2.85vw,.8rem);margin-top:6px}
html[data-lead="es"] .top .tagline .en{color:#d3d9e4;font-size:1em}
html[data-lead="es"] .top .panel .es{color:var(--gold);font-size:1em;letter-spacing:.12em;margin-top:0}
html[data-lead="es"] .top .panel .en{color:#d3d9e4;font-size:.95rem;letter-spacing:.1em;margin-top:2px}
html[data-lead="es"] .top .sub .es{color:#fff;font-weight:400}
html[data-lead="es"] .top .sub .en{color:#d3d9e4}

html[data-lead="es"] .prose .es,html[data-lead="es"] .key .es,html[data-lead="es"] .demoline .es,
html[data-lead="es"] .note .es,html[data-lead="es"] .status .es,html[data-lead="es"] footer .es{font-weight:400}
html[data-lead="es"] .key .es a.add{color:var(--link)}
html[data-lead="es"] .key .en a.add{color:var(--muted)}
html[data-lead="es"] .card h2 .es{font-size:1em;margin-top:0}
html[data-lead="es"] .card h2 .en{font-size:.88rem;margin-top:2px}
html[data-lead="es"] .desc .en{margin-top:4px}
html[data-lead="es"] .card h3 .es{text-transform:uppercase;letter-spacing:.07em;font-size:1em}
html[data-lead="es"] .card h3 .en{text-transform:none;letter-spacing:0;font-size:max(.88rem,.92em)}
html[data-lead="es"] a.link .t .es{font-size:.96rem}
html[data-lead="es"] a.link .t .en{font-size:.88rem}
html[data-lead="es"] a.link.pub .t .es{font-size:.94rem}
html[data-lead="es"] a.link.pub .t .en{font-size:.88rem}
html[data-lead="es"] a.link.pub .d .es{font-size:.88rem;font-weight:400}
html[data-lead="es"] a.link.pub .d .en{font-size:.88rem}
html[data-lead="es"] a.link:hover .es,html[data-lead="es"] a.link:focus-visible .es{color:var(--hover-text)}
html[data-lead="es"] a.link:hover .en,html[data-lead="es"] a.link:focus-visible .en{color:var(--hover-es)}

/* Dark: the page's own touches (the palette itself is in av-prefs.css) */
html[data-theme="dark"] .note{border-color:var(--line)}
html[data-theme="dark"] .demoline{color:var(--text)}

/* ---------------------------------------------------------------- The logo as a link, the home page and the QR page (Oct 10)
   The logo links to the Control Panel itself here and to the public home page, /home/, on every other page. The link
   takes the logo's own box (its width, centered, the image's margin inside), so the logo neither moves nor changes
   size. /home/ and /home/qr/ are written from this page by the link job (links/pto_links.py build-home) and load this
   stylesheet; the .qr rules are theirs. */
.top .brand{display:block;width:max-content;margin:0 auto;border-radius:50%}
.top .brand:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
html[data-lead="es"] .top > .brand{order:-2}
.qr-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (min-width:600px){.qr-grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.qr-grid{grid-template-columns:1fr 1fr 1fr}}
.qr{margin:0;padding:12px 10px;border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:11px;background:var(--row);text-align:center;min-width:0}
.qr a{display:inline-block;border-radius:10px}
.qr a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.qr img{display:block;width:200px;max-width:100%;height:auto;background:#fff;border-radius:8px;padding:6px}
.qr figcaption{margin-top:8px;font-size:.92rem}
.qr code{display:block;margin-top:4px;font-family:inherit;font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}

/* The home page's way back for board members and evaluators (Ali, Oct 10): a small "Admin Login" link at the top left
   of its header (the Control Panel will sit behind a sign-in later; the link itself is plain). On a phone it sits in
   the flow under the slim controls row, left-aligned; from 860px it takes the header's top left corner, clear of the
   controls at the top right. #d3d9e4 on the navy is 10.6:1; the same in dark (the header keeps its navy). */
.top .admin{display:block;width:max-content;margin:0 0 8px;font-size:.88rem;line-height:1.3;color:#d3d9e4;text-decoration:none;text-align:left}
.top .admin:hover,.top .admin:focus-visible{text-decoration:underline;text-underline-offset:3px;outline:none}
.top .admin:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.top .admin .es{color:#b6c0d1;font-size:max(.88rem,.9em);margin-top:0}
html[data-lead="es"] .top > .admin{order:-3}
html[data-lead="es"] .top .admin .es{color:#d3d9e4;font-size:1em}
html[data-lead="es"] .top .admin .en{color:#b6c0d1;font-size:max(.88rem,.9em)}
@media (min-width:860px){.top .admin{position:absolute;top:12px;left:16px;margin:0}}

/* The board's public box switches (Oct 13; automation/board/README-board.md): drawn by /board/switches.js into the
   Public pages card on the Control Panel and on /board/, for signed-in board members only (/home/ never loads it). */
.av-switches{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;min-width:0}
.card .av-switches:first-child{margin-top:4px;border-top:0;padding-top:0}
.av-switches h3{margin:0 0 6px}
.av-switches h4{margin:14px 0 4px;font-size:.92rem}
.av-switches p{margin:4px 0}
.av-switches .note{font-size:.9rem;border:0;padding:0;margin:4px 0;border-radius:0}
.av-switches .note .en{font-weight:400}
.av-sw-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:760px){.av-sw-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.av-sw-row{background:var(--row);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}
.av-sw-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.av-sw-line .t{min-width:0;overflow-wrap:anywhere}
.av-sw-line .path{display:block;font-size:.88rem;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px;overflow-wrap:anywhere}
.av-sw{-webkit-appearance:none;appearance:none;flex:none;min-width:96px;min-height:44px;margin:0;border-radius:999px;border:2px solid var(--edge);
  background:var(--card);color:var(--text);font:inherit;font-size:.9rem;font-weight:700;line-height:1.1;padding:3px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.av-sw[aria-checked="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.av-sw .en,.av-sw .es{display:block;margin:0;color:inherit}
.av-sw .es{font-size:.88rem;font-weight:500}
.av-sw:disabled{opacity:.6;cursor:wait}
.av-sw:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.av-sw-msg{font-size:.88rem}
.av-sw-msg:empty{display:none}
.av-sw-msg .en{font-weight:400}
.av-sw-msg.err{color:#a3221a}
html[data-theme="dark"] .av-sw-msg.err{color:#ffb4ab}
.av-sw-log{font-size:.88rem;margin:4px 0 0;padding-left:18px;overflow-wrap:anywhere}
.back{margin:18px 0 8px}