/* Sydney Bar Log: shared design system for every page (bars, route planner, menus, bar sheet).
   Flat on purpose: no gradients, glows, bevels or drop shadows. Depth comes from surface tone and 1px lines.
   Colours: three wood surfaces, three ivory text strengths, one brass accent, oxblood for the header, red for warnings. */

@font-face{font-family:Zodiak;font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/zodiak-regular.woff2") format("woff2")}
@font-face{font-family:Zodiak;font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/zodiak-italic.woff2") format("woff2")}
@font-face{font-family:Zodiak;font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/zodiak-bold.woff2") format("woff2")}
@font-face{font-family:Zodiak;font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/zodiak-bolditalic.woff2") format("woff2")}
@font-face{font-family:Satoshi;font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/satoshi-400.woff2") format("woff2")}
@font-face{font-family:Satoshi;font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/satoshi-500.woff2") format("woff2")}
@font-face{font-family:Satoshi;font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/satoshi-700.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* surfaces */
  --wood:#1A110D; --wood-2:#231813; --wood-3:#2D211A; --wood-4:#3A2B22;
  /* text */
  --ivory:#EFE6D2; --ivory-2:#C4B69C; --ivory-3:#958770;
  /* accent (one hue, three strengths) */
  --brass:#CDA862; --brass-hi:#E2C58C; --brass-lo:#7D6236; --brass-ink:#1C1308;
  /* header and warnings */
  --ox:#4E181B; --red:#E8806F; --green:#8FC97E;   /* green = open now, red = closed (Anh, Nov 11 2026) */
  /* lines */
  --rule:rgba(226,197,140,.24); --rule-soft:rgba(226,197,140,.12);
  --serif:Zodiak, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:Satoshi, ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --header:64px;
  --g:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--wood);color:var(--ivory);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
::selection{background:var(--brass);color:var(--brass-ink)}
input,select,textarea{caret-color:var(--brass)}
*{scrollbar-color:var(--wood-4) transparent;scrollbar-width:thin}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gilt{color:var(--brass)}
.serif{font-family:var(--serif)}

/* ---------- header: identical on every page ---------- */
.site-header{position:sticky;top:0;z-index:1000;background:var(--ox);border-bottom:1px solid var(--brass-lo);padding-top:env(safe-area-inset-top,0px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header)}
.mark{display:flex;align-items:baseline;gap:10px;min-width:0;text-decoration:none}
.mark b{font-family:var(--serif);font-style:italic;font-weight:700;font-size:26px;letter-spacing:-.01em;white-space:nowrap;color:var(--brass)}
.mark small{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ivory-2);white-space:nowrap}
.pages{display:flex;gap:22px}
.pages a{font-size:14px;font-weight:700;color:var(--ivory-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.pages a:hover{color:var(--ivory)}
.pages a[aria-current="page"]{color:var(--brass-hi);border-color:var(--brass)}
@media (max-width:719px){
  :root{--header:56px}
  .mark{flex-direction:column;gap:0}
  .mark b{font-size:21px}
  .mark small{font-size:12.5px;line-height:1.1}
  .pages{gap:14px}
  .pages a{font-size:13.5px}
  .pages .long{display:none}
}

/* ---------- page heading ---------- */
.page-head{padding:26px 0 6px}
.page-head h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(26px,3.6vw,38px);line-height:1.08;color:var(--brass)}
.page-head p{margin:6px 0 0;color:var(--ivory-2);max-width:66ch}

/* ---------- controls ---------- */
.seg{display:inline-flex;border:1px solid var(--rule);padding:3px;gap:2px;background:var(--wood-2)}
.seg button{font:inherit;font-size:14px;font-weight:700;border:0;background:transparent;color:var(--ivory-2);padding:8px 13px;cursor:pointer;min-height:38px;white-space:nowrap}
.seg button:hover{color:var(--ivory)}
.seg button[aria-pressed="true"]{background:var(--brass);color:var(--brass-ink)}
.seg button small{font-weight:500;opacity:.75;margin-left:4px}
.field{display:flex;align-items:center;gap:8px;background:var(--wood-2);border:1px solid var(--rule);padding:0 10px;min-height:46px;color:var(--ivory-3)}
.field:focus-within{border-color:var(--brass)}
.field input,.field select{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ivory);background:transparent;border:0;outline:0;min-height:44px}
.field select option{background:var(--wood-2)}
.field input::placeholder{color:var(--ivory-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-weight:700;font-size:14px;min-height:44px;padding:0 14px;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--ivory-2);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.btn:hover{border-color:var(--brass);color:var(--ivory)}
.btn.prime{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
.btn.prime:hover{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--brass-ink)}
.btn:disabled{opacity:.45;cursor:default}
.chip{font:inherit;font-size:13px;font-weight:700;color:var(--ivory-2);background:transparent;border:1px solid var(--rule);padding:4px 10px;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--ivory);border-color:var(--brass)}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--brass-ink);border-color:var(--brass)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .lbl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ivory-3);align-self:center;margin-right:2px}
.label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ivory-3)}
.hint{margin:8px 0 0;font-size:13px;color:var(--ivory-3)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:3px 8px;border:1px solid var(--brass-lo);color:var(--brass-hi)}
.badge .ic{width:14px;height:14px}
.warn{color:var(--red)}

/* ---------- numbered markers (route stops, S/F pins) ---------- */
.tok{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:14px;line-height:1;background:var(--brass);color:var(--brass-ink);border:2px solid var(--wood)}
.tok.fin{background:var(--ox);color:var(--brass-hi);border-color:var(--brass)}
.tok.plus{background:none;border:1px dashed var(--brass-lo);color:var(--brass-hi)}

/* ---------- empty states ---------- */
.empty{border:1px dashed var(--rule);padding:28px 20px;text-align:center;color:var(--ivory-2)}
.empty b{display:block;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ivory);margin-bottom:2px}

/* ---------- dialogs ---------- */
dialog{color:var(--ivory)}
dialog::backdrop{background:rgba(12,7,5,.72)}
dialog.signin{background:var(--wood-2);border:1px solid var(--rule);padding:22px;width:min(360px,calc(100vw - 32px))}
dialog.signin h3{margin:0 0 4px;font-family:var(--serif);font-style:italic;font-weight:700;font-size:24px;color:var(--brass)}
dialog.signin p{margin:0 0 14px;color:var(--ivory-2);font-size:14px}
dialog.signin input{width:100%;font:inherit;font-size:16px;color:var(--ivory);background:var(--wood);border:1px solid var(--rule);padding:11px 12px}
dialog.signin input:focus{outline:none;border-color:var(--brass)}
dialog.signin .err{color:var(--red);font-size:13px;min-height:20px;margin:6px 0}
dialog.signin .row{display:flex;gap:8px;justify-content:flex-end}

footer.site-foot{padding:8px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--ivory-3)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* open / closed line on bar cards (public/hours.js) */
.openst{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:700;color:var(--ivory-2)}
.openst .ic{width:14px;height:14px;flex:none}
.openst.st-open,.openst.st-closing{color:var(--green)}
.openst.st-closed,.openst.st-perm,.openst.st-temp{color:var(--red)}
.openst.st-unknown{color:var(--ivory-3)}
.bar[data-shut="yes"] .cover{opacity:.45}