/* CruiseSteward: one stylesheet for every page.
   Brand locked 15 Nov 2026 (atlas-work/plan/cruise-looks/BRAND.md). Tokens copied from brand/tokens.css.
   Mobile first, 320px up. Body text 16px minimum. Tap targets 44px minimum.
   Load Montserrat 400/500/600/700 from Google Fonts in the page head; the stack falls back to system fonts. */

/* ===== 1. Tokens ===== */
:root{
  --cs-ink:#0F2537;            /* all text */
  --cs-muted:#364456;          /* secondary text */
  --cs-sky:#D2F0EF;            /* page-top band */
  --cs-sea:#0B8791;            /* sea band, shapes, ring, focus */
  --cs-button:#0A7A84;         /* buttons and links with white text (5.08:1) */
  --cs-label:#0A6069;          /* small uppercase labels on white */
  --cs-sun:#F26419;            /* shapes only, never text */
  --cs-orange-text:#BC3F0B;    /* orange words, e.g. "Steward" */
  --cs-gold:#F6BA26;           /* decoration only, never meaning */
  --cs-page:#FFFFFF;
  --cs-field:#F1F7F8;
  --cs-field-border:#7A8696;   /* 1.5px, measures 3:1 */
  --cs-chip:#CDEEEE;           /* behind the key number, navy text */
  --cs-disc-1:#F6BA26; --cs-disc-2:#D2F0EF; --cs-disc-3:#FFDCCB; --cs-disc-4:#E6ECF2;
  --cs-font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cs-radius-card:22px; --cs-radius-field:16px; --cs-radius-chip:8px;
  --cs-shadow-card:0 10px 30px rgba(15,37,55,.16);
  --cs-gutter:16px;            /* side gutter; widens a little on bigger phones */
  --cs-max:1040px;             /* widest content column */
  --cs-max-text:720px;         /* reading column */
  color-scheme:light;
}
@media (min-width:380px){:root{--cs-gutter:22px}}

/* ===== 2. Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cs-page);color:var(--cs-ink);font-family:var(--cs-font);font-size:17px;line-height:1.5;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--cs-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--cs-ink);text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--cs-sea);outline-offset:2px;border-radius:8px}
[hidden]{display:none !important}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0}
p{margin:0 0 12px}
b,strong{font-weight:600}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cs-wrap{max-width:var(--cs-max);margin:0 auto;padding:0 var(--cs-gutter)}
.cs-wrap--text{max-width:var(--cs-max-text)}
.cs-h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:28px 0 12px}
.cs-lead{color:var(--cs-muted);font-size:17px;margin:0 0 16px}
.cs-muted{color:var(--cs-muted)}
.cs-prose{max-width:var(--cs-max-text)}
.cs-prose h2{font-size:22px;margin:28px 0 10px}
.cs-prose ul{padding-left:22px;margin:0 0 12px}
.cs-prose li{margin:0 0 8px}

/* ===== 3. Horizon page-top band =====
   <header class="cs-horizon">
     <div class="cs-wrap cs-horizon__inner">
       <div class="cs-header"> brand link + optional .cs-search </div>
       <h1 class="cs-horizon__title">Headline</h1>
       <div class="cs-horizon__scene" aria-hidden="true"><span class="cs-sun"></span><img class="cs-ship" src="…/assets/ship.svg" alt=""></div>
     </div>
     <div class="cs-sea" aria-hidden="true"></div>
   </header>
   The sky and sea span the full width; sun and ship stay inside the content column.
   The scene is its own row under the headline, so the headline can never run into the ship or sun. */
.cs-horizon{position:relative;isolation:isolate;background:var(--cs-sky);overflow:hidden}
.cs-horizon__inner{position:relative;display:flex;flex-direction:column;gap:18px;padding-top:14px}
.cs-horizon__title{font-size:clamp(29px,8.6vw,34px);font-weight:600;line-height:1.08;letter-spacing:-.03em;max-width:13em;text-wrap:balance}
.cs-horizon__lead{color:var(--cs-ink);font-size:17px;max-width:36em;margin:-6px 0 0}
.cs-horizon__scene{position:relative;height:118px;margin-top:-6px}
.cs-sun{position:absolute;z-index:0;right:8px;bottom:44px;width:76px;height:76px;border-radius:50%;background:var(--cs-sun)}
.cs-ship{position:absolute;z-index:2;left:0;bottom:60px;width:132px;height:auto;display:block}
.cs-sea{position:absolute;z-index:1;left:0;right:0;bottom:0;height:70px;background:var(--cs-sea)}
.cs-horizon--short .cs-horizon__scene{height:104px}
@media (min-width:720px){
  .cs-horizon__inner{gap:22px;padding-top:18px}
  .cs-horizon__title{font-size:clamp(38px,4.6vw,48px);max-width:16em}
  .cs-horizon__scene{height:150px}
  .cs-sun{width:104px;height:104px;right:40px;bottom:46px}
  .cs-ship{width:184px;bottom:68px;left:8px}
  .cs-sea{height:80px}
}
/* Pull the first card up over the sea, as in the reference screen. */
.cs-overlap{position:relative;z-index:3;margin-top:-34px}
@media (min-width:720px){.cs-overlap{margin-top:-44px}}

/* ===== 4. Header: mark + two-colour wordmark + search button ===== */
.cs-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.cs-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--cs-ink)}
.cs-brand:hover{text-decoration:none}
.cs-brand img,.cs-brand svg{width:40px;height:40px;flex:none;display:block}
.cs-wordmark{font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--cs-ink);white-space:nowrap}
.cs-wordmark span{color:var(--cs-orange-text)}
.cs-on-dark .cs-wordmark{color:#FFFFFF}
.cs-on-dark .cs-wordmark span{color:#FF8A4D}
.cs-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:14px;background:var(--cs-page);color:var(--cs-ink);border:0;cursor:pointer}
.cs-search svg{width:20px;height:20px}
@media (min-width:720px){.cs-wordmark{font-size:22px}.cs-brand img,.cs-brand svg{width:44px;height:44px}}

/* ===== 5. Answer card and key-number chip ===== */
.cs-card{background:var(--cs-page);border-radius:var(--cs-radius-card);padding:20px 20px 18px;box-shadow:var(--cs-shadow-card)}
@media (min-width:380px){.cs-card{padding:20px 22px}}
.cs-card__label{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-label)}
.cs-card__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cs-sun);flex:none}
.cs-answer{font-size:clamp(22px,6vw,27px);font-weight:600;line-height:1.18;letter-spacing:-.02em;margin:0 0 10px}
.cs-card__sub{font-size:16px;color:var(--cs-muted);margin:0 0 6px}
.cs-honesty{font-size:16px;font-weight:500;color:var(--cs-ink);margin:10px 0 0}
.cs-chip{background:var(--cs-chip);color:var(--cs-ink);border-radius:var(--cs-radius-chip);padding:0 6px;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Notes inside a card: things to fix, things to take care over. Pale panel, orange edge as a shape, navy words. */
.cs-note{background:var(--cs-field);border-left:4px solid var(--cs-sun);color:var(--cs-ink);border-radius:10px;padding:10px 12px;margin:12px 0 0;font-size:16px}
.cs-note p{margin:0 0 4px}.cs-note p:last-child{margin:0}
.cs-note ul{margin:4px 0 0;padding-left:20px}

/* ===== 6. Fields ===== */
.cs-label{display:block;font-weight:600;margin:0 0 8px}
.cs-hint{display:block;color:var(--cs-muted);font-size:16px;margin:6px 0 0}
.cs-field{display:flex;align-items:center;gap:8px;height:60px;border-radius:var(--cs-radius-field);padding:0 16px;background:var(--cs-field);border:1.5px solid var(--cs-field-border);max-width:340px}
.cs-field:focus-within{outline:3px solid var(--cs-sea);outline-offset:2px}
.cs-field__sym{font-size:22px;color:var(--cs-label);flex:none}
.cs-field input,.cs-field select{border:0;outline:0;font:inherit;font-size:24px;font-weight:600;width:100%;min-width:0;background:transparent;color:var(--cs-ink);padding:0}
.cs-field__unit{font-size:16px;white-space:nowrap;color:var(--cs-muted);flex:none}
.cs-field--sm{height:50px;max-width:170px;padding:0 12px}
.cs-field--sm input{font-size:20px}
select.cs-select{font:inherit;font-size:17px;min-height:48px;border-radius:var(--cs-radius-field);background:var(--cs-field);border:1.5px solid var(--cs-field-border);color:var(--cs-ink);padding:0 12px;max-width:100%}
/* A field that needs fixing: darker orange edge (3:1 on the field) plus the words in the answer card. */
/* ".bad" is the same marker under the name the drink calculator's script already adds; keep both. */
.cs-bad .cs-field,.cs-bad .cs-stepper,.cs-field.cs-bad,input.cs-bad,
.bad .cs-field,.bad .cs-stepper,.cs-field.bad{border-color:var(--cs-orange-text);border-width:2px}
.cs-item.bad{box-shadow:inset 4px 0 0 var(--cs-orange-text)}
.cs-example{display:inline-block;font-size:16px;color:var(--cs-muted);margin-top:6px}

/* ===== 7. Steppers ===== */
.cs-stepper{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;height:58px;border-radius:var(--cs-radius-field);background:var(--cs-field);border:1.5px solid var(--cs-field-border);padding:0 5px;min-width:150px}
.cs-stepper button{width:44px;height:44px;flex:none;border-radius:12px;border:0;background:var(--cs-page);color:var(--cs-ink);font:inherit;font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center}
.cs-stepper button:last-child{background:var(--cs-button);color:#FFFFFF}
.cs-stepper button:active{transform:scale(.96)}
.cs-stepper input{width:3.2ch;min-width:48px;height:44px;border:0;text-align:center;font:inherit;font-size:22px;font-weight:600;background:transparent;color:var(--cs-ink);padding:0}
.cs-stepper input:focus{outline:0}
.cs-stepper:focus-within{outline:3px solid var(--cs-sea);outline-offset:2px}
.cs-stepper--sm{height:52px;min-width:140px}
.cs-stepper--sm{gap:2px}
.cs-stepper--sm input{font-size:20px;min-width:40px;width:2.6ch}

/* ===== 8. Buttons ===== */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:0;background:var(--cs-button);color:#FFFFFF;font:inherit;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer}
.cs-btn:hover{color:#FFFFFF;background:#086A73}
.cs-btn--quiet{background:var(--cs-page);color:var(--cs-ink);border:1.5px solid var(--cs-field-border)}
.cs-btn--quiet:hover{background:var(--cs-field);color:var(--cs-ink)}
.cs-linkbtn{background:none;border:0;padding:0 4px;min-height:44px;font:inherit;font-size:16px;font-weight:600;color:var(--cs-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Tick boxes, toggle chips and a segmented choice (e.g. currency symbol) */
.cs-check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
.cs-check input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--cs-button)}
.cs-check b{display:block;font-weight:600}
.cs-check small{display:block;color:var(--cs-muted);font-size:16px}
.cs-toggles{display:flex;flex-wrap:wrap;gap:8px}
.cs-toggles label{position:relative}
.cs-toggles input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cs-toggles span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--cs-field-border);border-radius:22px;font-size:16px;background:var(--cs-page)}
.cs-toggles input:checked+span{border-color:var(--cs-sea);background:var(--cs-chip);font-weight:600}
.cs-toggles input:checked+span::before{content:"\2713";color:var(--cs-label);font-weight:700;margin-right:6px}
.cs-toggles input:focus-visible+span{outline:3px solid var(--cs-sea);outline-offset:2px}
.cs-seg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--cs-field);border:1.5px solid var(--cs-field-border)}
.cs-seg label{position:relative}
.cs-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cs-seg span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:10px;font-size:17px;font-weight:600;color:var(--cs-muted)}
.cs-seg input:checked+span{background:var(--cs-button);color:#FFFFFF}
.cs-seg input:focus-visible+span{outline:3px solid var(--cs-sea);outline-offset:2px}

/* ===== 9. Symbol discs and tiles =====
   Symbols come from assets/symbols.svg (ids cs-<name>). Inline the <symbol>s a page uses in a hidden <svg>,
   then: <span class="cs-disc cs-disc--1"><svg><use href="#cs-ships"/></svg></span>. A word always sits beside or under a disc. */
.cs-disc{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--cs-ink);background:var(--cs-disc-4)}
.cs-disc svg{width:20px;height:20px}
.cs-disc--1{background:var(--cs-disc-1)}.cs-disc--2{background:var(--cs-disc-2)}.cs-disc--3{background:var(--cs-disc-3)}.cs-disc--4{background:var(--cs-disc-4)}
.cs-disc--lg{width:64px;height:64px}.cs-disc--lg svg{width:28px;height:28px}
.cs-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.cs-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:132px;padding:16px 10px 14px;border-radius:18px;background:var(--cs-field);text-align:center;text-decoration:none;color:var(--cs-ink)}
.cs-tile__word{font-weight:600;font-size:17px;line-height:1.2}
.cs-tile__note{font-size:16px;color:var(--cs-muted);line-height:1.3}
a.cs-tile{background:var(--cs-page);border:1.5px solid var(--cs-sea);box-shadow:var(--cs-shadow-card)}
a.cs-tile:hover{text-decoration:none;background:var(--cs-field)}
a.cs-tile .cs-tile__note{color:var(--cs-label);font-weight:600}

/* ===== 10. List rows ===== */
.cs-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cs-field);border-radius:18px;padding:10px 14px;min-height:64px;color:var(--cs-ink);text-decoration:none}
.cs-row__main{display:flex;align-items:center;gap:12px;min-width:0}
.cs-row__title{font-weight:600;display:block}
.cs-row__meta{font-size:16px;color:var(--cs-muted);display:block}
.cs-row__end{font-weight:600;font-size:16px;color:var(--cs-label);text-align:right}
a.cs-row:hover{text-decoration:none;background:var(--cs-chip)}

/* ===== 11. "Paid link" label: sits next to any link that can earn a commission ===== */
.cs-paid{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:600;line-height:1.2;color:var(--cs-ink);background:var(--cs-disc-4);border-radius:6px;padding:2px 8px;white-space:nowrap;vertical-align:middle}

/* ===== 12. Tables ===== */
.cs-table{width:100%;border-collapse:collapse;font-size:16px;margin:14px 0 0}
.cs-table th{text-align:left;font-weight:600;color:var(--cs-label);padding:8px 0;border-bottom:1.5px solid var(--cs-field-border)}
.cs-table td{padding:10px 0;border-top:1px solid #D5E0E6;vertical-align:top}
.cs-table td+td,.cs-table th+th{padding-left:12px}
.cs-table .cs-num{text-align:right;white-space:nowrap;font-weight:600}
.cs-table .cs-how{display:block;color:var(--cs-muted);font-size:16px}
.cs-table tr.cs-best td{background:var(--cs-chip)}
.cs-table tr.cs-best td:first-child{box-shadow:inset 4px 0 0 var(--cs-sea);padding-left:10px}
.cs-table tr.cs-best td:last-child{padding-right:8px}
.cs-tag{color:var(--cs-label);font-weight:600;white-space:nowrap}
.cs-table-scroll{overflow-x:auto}

/* ===== 13. Tool layout: answer card beside the form on desktop, first on phones ===== */
.cs-tool{display:grid;gap:20px}
.cs-tool__form fieldset{border:0;margin:0 0 8px;padding:0;min-width:0}
.cs-tool__form legend{font-size:22px;font-weight:600;letter-spacing:-.02em;padding:0;margin:26px 0 12px}
.cs-tool__field{margin:0 0 18px}
.cs-pair{display:flex;flex-wrap:wrap;gap:14px 20px}
.cs-pair>*{flex:1 1 150px;max-width:220px;display:flex;flex-direction:column;justify-content:space-between}
.cs-panel{border:1.5px solid var(--cs-field-border);border-radius:18px;padding:4px 16px 12px;margin:8px 0 0}
.cs-items{display:flex;flex-direction:column;gap:10px}
.cs-item{background:var(--cs-field);border-radius:18px;padding:14px}
.cs-item__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 12px;flex-wrap:wrap}
.cs-item__name{font-weight:600;font-size:18px;padding-top:12px}
.cs-item__counts{display:flex;gap:10px 12px;flex-wrap:wrap;margin-top:10px}
.cs-item__counts .cs-label{font-weight:500;color:var(--cs-muted);font-size:16px;margin-bottom:6px}
.cs-item .cs-field,.cs-item .cs-stepper{background:var(--cs-page)}
.cs-item.cs-bad{box-shadow:inset 4px 0 0 var(--cs-orange-text)}
@media (min-width:900px){
  .cs-tool{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:44px}
  .cs-tool__side{position:sticky;top:16px;grid-column:2;grid-row:1}
  .cs-tool__form{grid-column:1;grid-row:1;padding-top:30px}
}

/* One-line answer pinned to the bottom of a phone screen */
.cs-bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--cs-page);border-top:1.5px solid var(--cs-chip);box-shadow:0 -6px 18px rgba(15,37,55,.08);padding:10px var(--cs-gutter) calc(10px + env(safe-area-inset-bottom));font-weight:600;font-size:16px;line-height:1.35}
.cs-bar .cs-linkbtn{float:right;margin:-6px 0 0 8px}
@media (min-width:900px){.cs-bar{display:none !important}}

/* ===== 14. Footer ===== */
.cs-footer{margin:44px 0 0;background:var(--cs-field);border-top:4px solid var(--cs-sea);padding:22px 0 28px;color:var(--cs-muted);font-size:16px}
.cs-footer p{margin:0 0 8px}
.cs-footer__honest{color:var(--cs-ink);font-weight:600}
.cs-footer .cs-brand{margin-bottom:6px}
.cs-footer--tool{padding-bottom:96px}
@media (min-width:900px){.cs-footer--tool{padding-bottom:28px}}

/* ===== 15. Motion and print ===== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .cs-btn,.cs-row,.cs-tile,.cs-stepper button{transition:background-color .15s ease,transform .1s ease}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .cs-stepper button:active{transform:none}
}
@media print{
  .cs-horizon{background:none}
  .cs-horizon__scene,.cs-sea,.cs-search,.cs-bar,.cs-no-print,.cs-stepper button,.cs-linkbtn{display:none !important}
  .cs-overlap{margin-top:0}
  .cs-card{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .cs-tool{display:block}
  .cs-field,.cs-stepper,.cs-toggles span{border:1px solid #999;height:auto;background:none}
  .cs-toggles input:not(:checked)+span{display:none}
  .cs-item{break-inside:avoid;background:none;border-top:1px solid #999;border-radius:0;padding:6px 0}
  .cs-footer{background:none;padding-bottom:0}
  body{font-size:12pt}
  a{text-decoration:none}
}