/*
  Title:      Zen Library: easy to read for older eyes (the shared header, the Admin hub, the password box and the type-to-find list)
  File:       app/static/lib_read.css
  Version:    1.3.1
  Date:       2026-10-22
  Depends on: zen_header.css, zen_pw.css and zen_select.css (the shared kit files of every Zen app, copied from /home/wang/tools/zen_nav);
              loaded right after them by lib_base.html and lib_login.html, so these rules win over the kit's equal rules. Colours only
              from the theme variables; --lib-mu, --lib-link, --lib-foil and --lib-tap are defined in lib_style.css (1.3.0).
  Used by:    every Zen Library page.
  Purpose:    Readability rules 1.1 (Zen-App-Design-Rules.md section 1, owner 2026-10-22): reading text 16 px, nothing under 15 px, tap
              areas at least 44 px, rem units, the same sizes on a phone, grey text darker. The shared header kit keeps its own sizes for
              the other Zen apps until each is touched; the Library lifts them here instead of changing the kit (copied from Zen OODA's
              zo_read.css 1.0.0, its variables renamed).
  Revisions:  1.3.1 2026-10-22 Claude Code: checker: a phone header on one row (menu in the ☰ panel); at 991-1100 px the menu words
              stacked (English over Chinese) so the menu stays on one row.
              1.3.0 2026-10-22 Claude Code: first version (from zo_read.css 1.0.0).
*/

/* 1. the bar: base text, the name of the app, the menu */
#zen-nav{font-size:1rem}
#zen-nav .zn-in{min-height:4rem}
#zen-nav .zn-title small{font-size:1rem}
#zen-nav .zn-brand{min-height:var(--lib-tap)}
#zen-nav .zn-title b{font-size:1.625rem}
#zen-nav .zn-item{height:var(--lib-tap); font-size:1.0625rem; opacity:1}
#zen-nav .zn-badge{min-width:1.5rem; height:1.5rem; font-size:.9375rem}
#zen-nav .zn-extra a{height:var(--lib-tap); font-size:1rem}
#zen-nav .zn-dd-menu a, #zen-nav .zn-panel a{height:var(--lib-tap); font-size:1rem}

/* 2. the right side: + Task, the bell, the constellation, the person, Sign out (44 px squares and buttons) */
#zen-nav .zn-btn{height:var(--lib-tap); font-size:1rem}
#zen-nav .zn-btn.zn-sq, #zen-nav .zapps > summary{width:var(--lib-tap); height:var(--lib-tap); font-size:1.25rem}
#zen-nav .zn-who b{font-size:1rem}
#zen-nav .zn-who small{font-size:1rem}
#zen-nav .zapps-item{font-size:1rem; min-height:var(--lib-tap)}
#zen-nav .zapps-item small{font-size:1rem}
#zen-nav .zapps-hub small{font-size:1rem}
#zen-nav .zapps-here{opacity:.8}
#zen-nav .nb > summary{width:var(--lib-tap); min-width:var(--lib-tap); height:var(--lib-tap)}
#zen-nav .nb.has > summary{width:5.25rem; min-width:5.25rem; height:var(--lib-tap)}
#zen-nav .nb .nb-n{font-size:1rem}
#zen-nav .zn-bp{font-size:1rem}
#zen-nav .zn-bg-h .zh{font-size:1rem}
#zen-nav .zn-bg-n{min-width:1.5rem; height:1.5rem; font-size:.9375rem}
#zen-nav .zn-bg-t{font-size:1rem}
#zen-nav .zn-bg-a small{font-size:1rem}
#zen-nav li.zn-bg-empty, #zen-nav .zn-bg-empty{font-size:1rem}
#zen-nav .zn-bg-more{height:var(--lib-tap); font-size:1rem}
#zen-nav .zn-pwho{font-size:1rem}
#zen-nav .zn-pwho small{font-size:1rem}

/* 3. tablets and phones: the same sizes (the kit makes the menu and buttons smaller there) */
@media (max-width:700px){
  #zen-nav .zn-in{min-height:3.5rem}
  #zen-nav .zn-item{height:var(--lib-tap); font-size:1.0625rem}
}
@media (max-width:440px){
  #zen-nav .zn-btn, #zen-nav .zapps > summary, #zen-nav .nb > summary, #zen-nav .nb.has > summary{height:var(--lib-tap)}
  #zen-nav .zn-btn{font-size:1rem}
  #zen-nav .zn-btn.zn-sq, #zen-nav .zapps > summary, #zen-nav .nb > summary{width:var(--lib-tap); min-width:var(--lib-tap)}
  #zen-nav .zn-item{font-size:1.0625rem}
}
@media (max-width:380px){
  #zen-nav .zn-item{font-size:1.0625rem}
}
/* 1.3.1, checker: a phone keeps ONE row (every menu item is in the ☰ panel, lib_header.html phone=0); the bar's own menu is empty */
@media (max-width:700px){
  #zen-nav .zn-right{margin-left:auto}
}
/* 1.3.1, checker: 991 to 1100 px keeps the menu on one row: the Chinese line under the English in each menu item */
@media (max-width:1100px) and (min-width:991px){
  #zen-nav .zn-item{flex-direction:column; justify-content:center; align-items:flex-start; gap:0; line-height:1.15; padding:0 8px}
  #zen-nav .zn-item .zh{margin-left:0}
  #zen-nav .zn-in{gap:10px}
}

/* 4. the Admin hub: the row of sections, the title, the tiles */
#zen-secs .zn-sec{height:var(--lib-tap); font-size:1rem}
#zen-hub{font-size:1rem}
#zen-hub .zn-hub-h .zn-hub-sub, #zen-hub .zn-hub-intro{font-size:1.0625rem; color:var(--lib-mu)}
#zen-hub .zn-tile{font-size:1rem}
#zen-hub .zn-tile-t b{font-size:1.5rem}
#zen-hub .zn-tile-d{font-size:1rem; color:var(--lib-mu)}
#zen-hub .zn-tile-m{font-size:1rem; color:var(--lib-link)}
#zen-hub .zn-hub-note{font-size:1rem; color:var(--lib-mu)}
@media (max-width:700px){
  #zen-secs .zn-sec{height:var(--lib-tap); font-size:1rem}
  #zen-hub .zn-tile-t b{font-size:1.5rem}
}

/* 5. the password box on the sign-in door: the eye a 44 px button, the Caps Lock note 16 px */
.pw-wrap > .pw-eye{width:var(--lib-tap) !important; height:var(--lib-tap) !important; right:2px !important}
.pw-wrap > input{padding-right:52px !important}
.pw-caps{font-size:1rem}

/* 6. the gold fills with words on them (+ Task, the current hub section, the counts): OODA's lifted gold (--lib-foil, zo_style.css),
   so the dark words read well from edge to edge in every theme (the kit's foil starts dark: 4.5:1 in Arizona Copper) */
#zen-nav .zn-btn.zn-task, #zen-secs .zn-sec[aria-current="page"], #zen-nav .zn-badge, #zen-nav .zn-bg-n{background:var(--lib-foil)}

/* 7. the type-to-find list (zen_select): its words 16 px, its lines and its box 44 px */
.zs-pop, .zs-pop .zs-q, .zs-pop .zs-o, .zs-pop .zs-none, .zs-pop .zs-g{font-size:1rem !important}
.zs-pop .zs-q{min-height:var(--lib-tap) !important}
.zs-pop .zs-o{min-height:var(--lib-tap)}