/* Sister Cities UI system (Task 27). Every page loads this: the member app,
   /admin, /insights and /coach. One type scale, one spacing scale, one
   button system, one card, one section header, one control height.

   Type:    page title 30 (28 on phones), card title 21 bold, section
            header 14 semibold uppercase tracked, body 15, supporting 13,
            nothing under 12.
   Spacing: 8px scale. 24 inside cards on phones, 32 from 1024 up; 40
            between major blocks; 16 between rows.
   Colour:  supporting text is --ui-t3, at least 4.5:1 on the cream.
   Buttons: .ui-btn plus one level: --primary, --secondary, --tertiary,
            --danger, or --on-dark on navy. 40px tall, 44 on touch widths.
*/
:root{
  --ui-bg:#F5F2EE; --ui-bg2:#EDE8DF; --ui-w:#FFFFFF;
  --ui-nv:#0C1527; --ui-nv2:#162039;
  --ui-t1:#0C1527; --ui-t2:#374151;
  --ui-t3:#5B6270;              /* 5.5:1 on cream, 5.0:1 on --ui-bg2 */
  --ui-bd:#D8D1C6; --ui-bd2:#C9C0B3;
  --ui-bl:#1D4ED8; --ui-bl2:#2563EB; --ui-bll:#EFF6FF;
  --ui-gn:#047857; --ui-rd:#B91C1C; --ui-rdl:#FEF2F2; --ui-am:#B45309;
  --ui-on-dark:rgba(255,255,255,.92); --ui-on-dark2:rgba(255,255,255,.7);

  --ui-fs-page:30px; --ui-fs-card:21px; --ui-fs-sec:14px;
  --ui-fs-body:15px; --ui-fs-sup:13px; --ui-fs-min:12px;

  --ui-s1:8px; --ui-s2:16px; --ui-s3:24px; --ui-s4:32px; --ui-block:40px;
  --ui-pad:24px;                /* inside a card; 32 from 1024 up */
  --ui-r:12px; --ui-r-ctl:10px;
  --ui-ctl:40px;                /* one height for buttons, inputs, selects */
  --ui-el:0 1px 2px rgba(12,21,39,.05),0 6px 20px rgba(12,21,39,.06);
  --ui-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media(min-width:1024px){ :root{ --ui-pad:32px } }
@media(max-width:1023px){ :root{ --ui-ctl:44px } }
@media(max-width:600px){ :root{ --ui-fs-page:28px } }

/* ---- type -------------------------------------------------------------- */
.ui-page-t{font:800 var(--ui-fs-page)/1.15 var(--ui-font);letter-spacing:-.02em;color:var(--ui-t1);margin:0}
.ui-card-t{font:800 var(--ui-fs-card)/1.25 var(--ui-font);letter-spacing:-.01em;color:var(--ui-t1);margin:0}
.ui-sec-h{font:600 var(--ui-fs-sec)/1.3 var(--ui-font);text-transform:uppercase;letter-spacing:.08em;color:var(--ui-t2);margin:0}
.ui-body{font:400 var(--ui-fs-body)/1.55 var(--ui-font);color:var(--ui-t2)}
.ui-sup{font:400 var(--ui-fs-sup)/1.5 var(--ui-font);color:var(--ui-t3)}

/* ---- card -------------------------------------------------------------- */
.ui-card{background:var(--ui-w);border:1px solid rgba(12,21,39,.08);border-radius:var(--ui-r);
  box-shadow:var(--ui-el);padding:var(--ui-pad)}
.ui-card + .ui-card{margin-top:var(--ui-block)}
.ui-callout{background:var(--ui-bll);border-left:3px solid var(--ui-bl2);border-radius:0 var(--ui-r-ctl) var(--ui-r-ctl) 0;
  padding:var(--ui-s2);font:400 var(--ui-fs-body)/1.55 var(--ui-font);color:var(--ui-t2)}

/* ---- buttons ----------------------------------------------------------- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-ctl);
  padding:0 16px;border-radius:var(--ui-r-ctl);border:1px solid transparent;
  font:700 14px/1.2 var(--ui-font);text-decoration:none;text-align:center;cursor:pointer;
  background:transparent;color:var(--ui-t1);transition:background .12s,border-color .12s;box-sizing:border-box}
.ui-btn:focus-visible{outline:2px solid var(--ui-bl2);outline-offset:2px}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ui-btn--primary{background:var(--ui-bl);border-color:var(--ui-bl);color:#fff}
.ui-btn--primary:hover:not(:disabled){background:#1E40AF;border-color:#1E40AF}
.ui-btn--secondary{background:var(--ui-w);border-color:var(--ui-bd2);color:var(--ui-t1)}
.ui-btn--secondary:hover:not(:disabled){background:var(--ui-bg);border-color:var(--ui-t3)}
.ui-btn--tertiary{color:var(--ui-bl);padding:0 8px}
.ui-btn--tertiary:hover:not(:disabled){background:var(--ui-bll)}
.ui-btn--danger{color:var(--ui-rd);border-color:rgba(185,28,28,.35);background:var(--ui-w)}
.ui-btn--danger:hover:not(:disabled){background:var(--ui-rdl)}
.ui-btn--on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.ui-btn--on-dark:hover:not(:disabled){background:rgba(255,255,255,.14)}
.ui-btn--block{display:flex;width:100%}
.ui-btns{display:flex;flex-wrap:wrap;gap:var(--ui-s1);align-items:center}

/* ---- controls ---------------------------------------------------------- */
.ui-input,.ui-select{min-height:var(--ui-ctl);padding:0 12px;border:1px solid var(--ui-bd2);border-radius:var(--ui-r-ctl);
  background:var(--ui-w);color:var(--ui-t1);font:400 15px/1.3 var(--ui-font);box-sizing:border-box;max-width:100%}
.ui-select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background:var(--ui-w) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6270' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center}
.ui-input:focus,.ui-select:focus{outline:2px solid var(--ui-bl2);outline-offset:0;border-color:var(--ui-bl2)}
@media(max-width:1023px){ .ui-input,.ui-select{font-size:16px} }   /* iOS does not zoom at 16 */
.ui-label{display:block;font:600 13px/1.4 var(--ui-font);color:var(--ui-t2);margin:0 0 6px}

/* A switch from a checkbox: <input type="checkbox" class="ui-switch">. */
.ui-switch{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:#CBD2DC;
  position:relative;cursor:pointer;flex:none;margin:10px 0;transition:background .15s;vertical-align:middle}
.ui-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.ui-switch:checked{background:var(--ui-gn)}
.ui-switch:checked::after{transform:translateX(16px)}
.ui-switch:focus-visible{outline:2px solid var(--ui-bl2);outline-offset:2px}

/* ---- pills ------------------------------------------------------------- */
.ui-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;
  font:700 12px/1.3 var(--ui-font);background:var(--ui-bg2);color:var(--ui-t2);white-space:nowrap}

/* ---- tables that become cards on phones ---------------------------------
   <table class="ui-stack">: below 768 every row is a card, each cell a
   "label: value" line; ui.js copies each column header into data-label.
   A cell with class ui-act is the row's actions, full width at the bottom;
   ui-lead is the row's title, shown without a label. */
@media(max-width:767px){
  table.ui-stack,table.ui-stack tbody{display:block;width:100%}
  table.ui-stack thead{display:none}
  table.ui-stack tr{display:block;background:var(--ui-w);border:1px solid rgba(12,21,39,.1);border-radius:var(--ui-r-ctl);
    padding:12px 16px;margin:0 0 12px}
  table.ui-stack td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;border:0!important;
    padding:6px 0!important;text-align:right!important;font-size:15px;min-width:0;overflow-wrap:anywhere}
  table.ui-stack td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;
    font:600 13px/1.4 var(--ui-font);color:var(--ui-t3)}
  table.ui-stack td:not([data-label])::before,table.ui-stack td[data-label=""]::before{display:none}
  table.ui-stack td.ui-lead{display:block;text-align:left!important;font-weight:700;font-size:16px;padding-top:0!important}
  table.ui-stack td.ui-lead::before{display:none}
  table.ui-stack td.ui-act{display:block;text-align:left!important;padding-top:12px!important}
  table.ui-stack td.ui-act::before{display:none}
  table.ui-stack td.ui-act .row,table.ui-stack td.ui-act > div{display:flex;flex-wrap:wrap;gap:8px}
  table.ui-stack td:empty{display:none}
}

/* ---- the shared menu panel (topbar.js, and the app's own menus) ------- */
.ui-scrim{position:fixed;inset:0;background:rgba(12,21,39,.45);z-index:1000}
.ui-panel{position:fixed;z-index:1001;background:var(--ui-nv);color:#fff;box-shadow:0 20px 48px rgba(0,0,0,.35);
  overflow:auto;-webkit-overflow-scrolling:touch}
.ui-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--ui-r-ctl);
  background:transparent;color:inherit;font:400 26px/1 system-ui,sans-serif;cursor:pointer}
.ui-x:hover{background:rgba(255,255,255,.1)}
body.ui-locked{overflow:hidden}