:root{
    /* West Point Inn — design tokens (defaults). Overridden site-wide by /shared/theme.php. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --paper: #F4F2EC;
    --surface: #FFFFFF;
    --ink: #201E19;          /* primary text */
    --muted: #6F6A60;        /* labels / secondary */
    --faint: #9C968B;        /* hints */
    --line: #E3DED4;         /* borders */
    --line-soft: #EFEBE2;    /* hairline */
    --accent: #2E5D42;       /* brand / interactive */
    --accent-strong: #264E38;
    --accent-wash: #E7EFE8;
    --good: #3B7A4B; --warn: #B26B00; --crit: #BC3B2E;

    /* legacy names still referenced by the shell */
    --page: var(--paper);
    --btn-bg: var(--surface);
    --btn-bg-hover: var(--paper);
    --btn-active-bg: #F0EBE0;
    --btn-active-ink: #1A2E1A;
    --bar-track: var(--accent-wash);
    --bar-fill: var(--accent);

    --gap-row-to-content: 40px;  /* space between the button row and the field below */
    --logo-w: 200px;             /* logo width; the date-bar indent couples to this */
  }

  *{ box-sizing: border-box; }

  html,body{
    margin:0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
  }

  .shell{
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 32px 64px;
  }

  /* ---- Top row: logo on the left, tabs + sign out on the right ---- */
  .topbar{
    display:flex;
    align-items:flex-start;
    gap: 18px;
  }

  .logo{
    display:block;
    width: var(--logo-w);  /* fixed width so the date bar can line up to it */
    height: 104px;         /* stretched a touch taller */
    margin-top: 5px;       /* nudge the logo down slightly */
    flex: 0 0 auto;
  }
  .logo-col{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; }
  .logo-date{ font-family:var(--font); font-size:12px; font-weight:600; color:var(--ink); text-align:center; }

  /* Everything but the logo lives here. Its bottom border is the faint divider,
     so the line starts at the title's 'I' and the logo stands by itself. */
  .header-body{
    flex: 1 1 auto;
    min-width: 0;
    display:flex;
    flex-direction:column;
    gap: 10px;
    padding-bottom: 0;
  }
  .header-top{
    display:flex;
    align-items:center;
    justify-content:flex-end;   /* status (In progress / user) sits top-right */
    gap: 16px;
    margin-top: 4px;            /* top line aligns with the top of the logo */
  }

  .title{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;   /* caps read better with tracking */
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ---- Status line (right): In progress · bar · % · user + login ---- */
  .statusline{
    display:flex;
    align-items:center;   /* Innkeepers vertically centred with the tab buttons */
    gap: 14px;
    font-size: 10px;
    color: var(--muted);
  }
  .title-stack{ display:flex; flex-direction:column; gap:1px; }
  .status-right{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap: 8px;
    margin-left:auto;
    font-size: 10px;
    color: var(--muted);
  }
  .statusline .nav{ margin-left:auto; }
  .status-progress{
    display:flex;
    align-items:center;
    gap: 7px;
  }
  .status-progress[hidden]{ display:none; }   /* hidden at 100% */
  .progress__label{
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c1272d;
  }
  .progress__track{
    display:inline-block;
    vertical-align:middle;
    width: 80px;
    height: 3px;
    border-radius: 999px;
    background: #f3c9cb;
    overflow:hidden;
  }
  .progress__fill{
    display:block;
    height:100%;
    width: 30%;                /* 30% */
    background: #c1272d;
    border-radius: 999px;
    transition: width .4s ease;
  }
  .progress__pct{
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .status-sep{ color: var(--line); }
  .status-user{ letter-spacing: 0.02em; }
  .status-user strong{ color: var(--ink); font-weight: 600; }

  /* ---- Tab + Sign out buttons (all share one look) ---- */
  .nav{
    display:flex;
    flex-wrap: nowrap;
    justify-content:flex-end;
    align-items:center;
    gap: 6px;
  }
  .nav .btn{ padding: 8px 11px; font-size: 13px; min-height: 34px; box-sizing: border-box; }

  .btn{
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: #412f13;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    transition: background .15s ease, border-color .15s ease, color .15s ease,
                transform .12s ease, box-shadow .15s ease;
  }
  .btn:hover{
    background: #6f5228;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .btn:active{ transform: translateY(0); box-shadow:none; }
  .btn:disabled{ opacity: 0.4; cursor: default; }
  .btn:disabled:hover{ transform:none; box-shadow:none; background: #412f13; }
  .btn:focus-visible{
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .btn[aria-selected="true"],
  .btn[aria-pressed="true"]{
    background: #412f13;
    color: #f6cf4c;
    border-color: #000;
  }
  .btn[aria-selected="true"]:hover,
  .btn[aria-pressed="true"]:hover{
    transform: none;
    box-shadow: none;
    background: #412f13;
  }

  .btn--icon{
    padding: 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
  .btn--icon svg{ display:block; }
  /* Preferences gear: match the height of the other nav buttons on the row */
  .nav .btn--icon{ padding: 0 10px; min-height: 34px; box-sizing: border-box; }

  .nav__spacer{ width: 8px; }   /* small breath before Sign out */

  /* Active section shown after the portal name: "Innkeepers; Logbook" */
  .title-sec{ color: var(--muted); font-weight: 600; }

  /* Hamburger holding the main sections, sitting after Sign out */
  .mainmenu{ position: relative; display: inline-flex; }
  .mainmenu__list{
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 210px;
  }
  .mainmenu__list[hidden]{ display: none; }
  .mainmenu__group{ position: relative; }
  .mainmenu__item{ justify-content: flex-start; width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .mainmenu__caret{ margin-left: auto; opacity: .6; font-size: 14px; line-height: 1; }
  /* subcategories fly out to the left when you hover a section that has them */
  .mainmenu__flyout{
    position: absolute; right: 100%; top: -1px; z-index: 61; display: none;
    flex-direction: column; gap: 2px; padding: 6px; min-width: 200px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  }
  .mainmenu__group.has-sub:hover > .mainmenu__flyout{ display: flex; }
  .mainmenu__group:has(> .mainmenu__item[aria-selected="true"]){ display: none; }  /* hide the section you're on */

  /* No globe / external-link icon on hover anywhere */
  a::after, .btn::after{ content: none !important; }

  /* ---- Content field ---- */
  .content{
    margin-top: 8px;
    min-height: 360px;
  }
  .panel{ display:none; }
  .panel.is-active{ display:block; }

  /* ---- Preferences page ---- */
  .page-title{
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .page-sub{ margin: 0 0 24px; font-size: 13px; color: var(--muted); }
  .pref-hint{ margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); max-width: 520px; }

  /* Section buttons sit beside the page title */
  .pref-head{ display:flex; align-items:center; gap: 16px 18px; flex-wrap:wrap; margin-bottom: 26px; }
  .pref-head .page-title{ margin: 0; }
  /* Preference section tabs + Return button only appear in "prefs mode" */
  .pref-tabs{ display:none; gap: 6px; align-items:center; }
  #returnBtn{ display:none; }
  .nav.prefs-mode .subtabs{ display:none; }
  .nav.prefs-mode .nav__spacer{ display:none; }
  .nav.prefs-mode #signOut{ display:none; }
  .nav.prefs-mode .mainmenu{ display:none; }        /* no hamburger on the prefs page */
  .nav.prefs-mode .pref-tabs{ display:inline-flex; order:1; }
  .nav.prefs-mode #prefsBtn{ order:2; }             /* gear sits between the tabs and Return */
  .nav.prefs-mode #returnBtn{ display:inline-flex; order:3; }   /* Return sits at the very right */

  /* Preference sections use the same full-width card + big bold title as the logbook */
  .pref-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:14px; }
  .pref-card__title{ font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px; }
  .pref-card .pref-row{ justify-content:flex-start; gap: 24px; }
  .pref-card .pref-row > label, .pref-card .pref-row > span{ min-width:190px; flex:0 0 auto; }
  .pref-table{ border-collapse:collapse; width:100%; max-width:640px; font-size:14px; }
  .pref-table th, .pref-table td{ text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-soft); }
  .pref-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
  .pref-table tbody tr:last-child td{ border-bottom:none; }
  .pref-section{ display:none; }
  .pref-section.is-active{ display:block; }
  .pref-dirty{ color: var(--warn); font-size: 13px; font-weight: 600; }
  .pref-dirty[hidden]{ display:none; }

  .pref-group{ margin-bottom: 32px; max-width: 560px; }
  .pref-group__label{
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 16px;
  }
  .pref-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 8px 0;
  }
  .pref-row label, .pref-row > span{ font-size: 14px; }
  .field{
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--btn-bg);
    border: 1px solid #C8B89C;
    border-radius: 6px;
    padding: 9px 12px;
    min-width: 200px;
  }
  .field:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

  .pref-check{
    display:flex;
    align-items:center;
    gap: 10px;
    font-size: 14px;
    padding: 7px 0;
    cursor: pointer;
  }
  .pref-check input{ width:16px; height:16px; accent-color: #555; }
  .pref-actions{
    max-width: 560px;
    margin-top: 8px;
    display:flex;
    align-items:center;
    gap: 14px;
  }
  .pref-saved{ color: var(--good); font-size: 13px; font-weight: 600; }
  .pref-saved[hidden]{ display:none; }

  @media (max-width: 720px){
    .shell{ padding: 14px 18px 48px; }
    .topbar{ flex-direction: column; }
    .header-top{ flex-direction: column; align-items:flex-start; gap: 10px; margin-top: 0; }
    .statusline{ justify-content:flex-start; }
    .nav{ justify-content:flex-start; flex-wrap:wrap; }
    .subbar{ padding-left: 0; }
    .logo{ height: 52px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; }
  }

  /* ---- Sign-in screen (login.php) ---- */
  .login-wrap{
    min-height: 78vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 48px 20px;
  }
  .login-card{
    width:100%;
    max-width: 340px;
    display:flex;
    flex-direction:column;
    gap: 12px;
    text-align:center;
  }
  .login-logo{ height: 84px; width:auto; margin: 0 auto 4px; display:block; }
  .login-title{
    margin: 0 0 6px;
    font-size: 18px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .login-label{
    display:block;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); text-align:left; margin-bottom: 6px;
  }
  .login-field{ width:100%; min-width:0; }
  .login-secret{ display:flex; flex-direction:column; gap: 12px; text-align:left; }
  .login-btn, .login-reset{ width:100%; justify-content:center; }
  .login-msg{ font-size: 13px; color: #9a3b2f; margin: 2px 0 0; }
  .login-hint{ font-size: 12px; color: var(--muted); margin: 2px 0 0; }
  .login-back{ font-size: 12px; color: var(--muted); text-decoration:none; margin-top: 6px; }
  .login-back:hover{ color: var(--ink); }

  /* ---- Sunrise/sunset: grouped together on the left of the status row ---- */
  .subinfo{
    display:flex;
    align-items:center;
    gap: 16px;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  .header-sun{ margin-right: auto; }   /* sun times to the left of the status line */
  .sun{ display:inline-flex; align-items:center; gap: 4px; white-space:nowrap; }
  .sun svg{ width: 11px; height: 11px; }

  /* ---- Date bar (below the header divider) ---- */
  .subbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;             /* date bar lines up on the right, under the hamburger */
    flex-wrap:wrap;
    gap: 12px 16px;
    margin-top: 0;
    padding-top: 3px;                     /* a couple px below the divider line */
    border-top: 1px solid var(--line);    /* thin divider between the tabs and the date/subtabs */
  }
  .subtabs{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px; }
  .subtabs .btn{ padding: 8px 11px; font-size: 13px; min-height: 34px; box-sizing: border-box; }
  .datebar{
    display:flex;
    flex-direction: column;
    align-items:flex-end;
    gap: 3px;
  }
  .datebar__controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 3px;
  }
  .datebar__btn{ padding: 7px 12px; font-size: 13px; min-height: 34px; box-sizing: border-box; }
  .datebar__nav{ font-size: 20px; line-height: 1; padding: 2px 12px; min-height: 34px; box-sizing: border-box; }
  .datebar__input{ padding: 7px 10px; font-size: 13px; min-width: 0; min-height: 34px; box-sizing: border-box; }
  .datebar__shown{ color: var(--muted); font-size: 12px; }
  .datebar__sun{ align-self: center; }   /* sun times centred on top of the date controls */
  .datebar__input::-webkit-clear-button{ display:none; }
  .datebar__input::-webkit-inner-spin-button{ display:none; }

  /* ---- Sign-in button: light gray, same hover lift as other buttons ---- */
  .login-btn{
    background: #412f13;
    color: #fff;
    border-color: #000;
  }
  .login-btn:hover{ background: #573f1c; }

  /* ---- Logbook fields layout ---- */
  .lb-section{ margin-bottom: 26px; }
  .lb-title{
    display:flex;
    align-items:center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
    font-weight: 600;
  }
  .lb-icon{ width: 18px; height: 18px; object-fit:contain; display:block; }
  .lb-sub{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 14px 0 8px;
  }
  .lb-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 10px 14px;
  }
  .lb-field{ display:flex; flex-direction:column; gap: 4px; }
  .lb-field > span{ font-size: 11px; color: var(--ink); }
  .lb-input{
    width: auto;
    min-width: 52px;
    max-width: 130px;
    field-sizing: content;            /* box grows to fit the typed value */
    padding: 4px 2px;                 /* 2px left/right */
    font-size: 12px;
  }
  input.lb-input{
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  select.lb-input{ width: auto; }

  /* red bold warning row (high water use / valves) */
  .lb-warn{
    display:flex;
    align-items:center;
    gap: 6px;
    margin: 0 0 10px;
    color: #c1272d;
    font-weight: 700;
    font-size: 13px;
  }
  .lb-warn[hidden]{ display:none; }
  .lb-warn-icon{ width: 16px; height: 16px; object-fit:contain; }

  /* weekly totals */
  .lb-total{ margin: 10px 0 0; font-size: 12px; color: var(--ink); }
  .lb-subtotal{ font-size: 10px; color: var(--ink); }
  .lb-subtotal strong, .lb-total strong{ font-variant-numeric: tabular-nums; }

  /* ═══ Reservation-panel look: dark forest-green header with gold accents ═══ */
  .topbar{
    background: #0F2411;
    border-radius: 12px;
    padding: 12px 22px 14px;
    margin-bottom: 0;
    gap: 18px;
  }
  .topbar .title{
    color: #FFFFFF;
    font-family: var(--font);
    text-transform: none;
    letter-spacing: .02em;
    font-size: 24px;
    font-weight: 700;
  }
  .topbar .title-sec{ color: #F5D060; font-weight: 600; }
  .topbar .status-user{ color: rgba(245,240,232,.6); }
  .topbar .status-user strong{ color: #F5EAD0; }
  .topbar .subinfo, .topbar .header-sun{ color: rgba(245,240,232,.78); }
  .header-date{ font-size: 11px; font-weight: 600; white-space: nowrap; }
  .topbar .header-date{ color: rgba(245,240,232,.88); }
  .topbar .progress__label{ color: #F5D060; }
  .topbar .progress__pct{ color: rgba(245,240,232,.82); }
  .topbar .status-sep{ color: rgba(245,240,232,.3); }
  .topbar .progress__track{ background: rgba(255,255,255,.18); }
  .topbar .logo-date{ color: rgba(245,240,232,.7); }

  /* header buttons on the dark bar */
  .topbar .btn{
    background: rgba(245,240,232,.07);
    border-color: rgba(245,240,232,.2);
    color: rgba(245,240,232,.82);
  }
  .topbar .btn:hover{ background: rgba(245,240,232,.14); color: #fff; }
  .topbar .btn[aria-selected="true"], .topbar .btn[aria-pressed="true"]{
    background: rgba(245,208,96,.14); border-color: #F5D060; color: #F5D060;
  }
  .topbar .btn--icon{ color: rgba(245,240,232,.82); }
  .topbar .datebar__input{
    background: rgba(245,240,232,.1); color: #F5EAD0; border-color: rgba(245,240,232,.22);
  }
  .topbar .subbar{ border-top-color: rgba(245,240,232,.14); }

  /* hamburger dropdown stays a light menu */
  .topbar .mainmenu__list, .topbar .mainmenu__flyout{ background: #0F2411; border-color: rgba(245,240,232,.16); }
  .topbar .mainmenu__list .btn{ background: transparent; border-color: transparent; color: rgba(245,240,232,.85); font-weight: 500; }
  .topbar .mainmenu__list .btn:hover,
  .topbar .mainmenu__group.has-sub:hover > .mainmenu__item{ background: rgba(245,240,232,.1); color: #fff; }
  .topbar .mainmenu__list .btn[aria-selected="true"]{ background: rgba(245,208,96,.12); border-color: transparent; color: #F5D060; }

  /* ── Portal frame + ink — baked in from the Innkeepers portal; the default for all portals ── */
  html, body{ background:#fff; }
  .shell{ padding-top:30px; }
  .content{ --ink:#000; --muted:#000; --faint:#000; --accent-strong:#000;
    position:relative; background:var(--paper); margin-top:6px;
    padding:6px 12px 12px; border:1px solid #cfc7b5; border-radius:12px; }
  .content input, .content select, .content textarea{ border-color:#000 !important;
    font-family:Arial, Helvetica, sans-serif !important; }
  .content .sd-savestatus{ position:absolute; bottom:-28px; right:6px; margin:0; }
  .subtabs .btn{ font-weight:700 !important; }
  .header-date{ font-size:13.5px !important; }