/* A quiet, light canvas. Green is the primary action and navigation color;
   itinerary regions and weather retain their useful, distinct colors. */
:root{
  --ink:#203d32;
  --muted:#64786d;
  --teal:#2d7358;
  --teal-dark:#20573f;
  --cream:#f6f8f6;
  --paper:#ffffff;
  --line:#dfe7e0;
  --coral:#638b73;
  --yellow:#e4eedf;
  --shadow:0 12px 36px #183d2910;
}
body{background:var(--cream);-webkit-font-smoothing:antialiased}
.page-shell{background:var(--cream)}
.topbar{border-bottom:1px solid var(--line)}
.brand{color:var(--teal-dark);font-weight:700;letter-spacing:-.035em}
.topbar-note{font-style:normal;color:var(--muted)}
.avatar{background:#e4eee5;color:var(--teal-dark);font-weight:600}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.17em}
.home-hero{padding:46px 0 48px;gap:32px}
.home-hero h1{font-size:clamp(40px,4.6vw,60px);line-height:1.2;letter-spacing:-.05em;font-weight:700;margin:12px 0 16px}
.home-hero p{font-size:15px;line-height:1.8;margin:0 0 22px;max-width:390px}
.hero-art.home-world{min-height:220px}
.world-land{fill:#bdd1c0;stroke:var(--cream)}
.world-city-aura{fill:#5b9c6d}
.world-city-halo{fill:#8fbf95;opacity:.48}
.world-city-core{fill:#f2ffdf;stroke:#286744;stroke-width:1.4}
.home-world-map figcaption a:before{background:#4d9264;box-shadow:0 0 7px #81b88c}
.home-world-map figcaption a{color:#3f6d52}
.button{border-radius:11px;font-weight:600;box-shadow:none;min-height:44px;transition:background .15s,box-shadow .15s}
.button:hover{background:var(--teal-dark);box-shadow:0 3px 10px #20573f12;transform:none}
.button.secondary{background:#e9f0e9;color:var(--teal-dark);border:1px solid #dbe6da}
.button.secondary:hover{background:#dce9db}
.button.white{background:#fffffff0;color:#234e3b;border:1px solid #ffffff50}
.button.white:hover{background:#fff}
.button.danger:hover{background:#f6dcd7;color:#a94339}
.text-button{font-weight:600}
.section-head{margin-bottom:18px}
.section-head h2{font-size:27px;font-weight:600;letter-spacing:-.035em}
.section-head p{font-size:13px;line-height:1.7}
.trip-group-heading{margin-bottom:12px}
.trip-group-heading h3{font-size:14px;font-weight:600}
.trip-grid{gap:16px}
.trip-tile.trip-cover-tile{border:0;box-shadow:0 4px 14px #2443320b}
.trip-cover-tile:hover{box-shadow:0 8px 22px #24433214;transform:translateY(-2px)}
.trip-cover-tile .trip-cover-copy h3{font-weight:600;letter-spacing:-.02em}
.trip-cover-date{background:#fffffff0!important;color:#234432;font-weight:600}
.trip-cover-edit,.trip-cover-menu>summary{background:#fffffff0;color:#315c42}
.trip-cover-enter{font-weight:400}
.trip-groups{gap:24px}
.trip-hero:not(.trip-hero-covered){background:#e4eee3;color:var(--ink)}
.trip-hero:not(.trip-hero-covered) h1{color:var(--ink)}
.trip-hero:not(.trip-hero-covered) .eyebrow,.trip-hero:not(.trip-hero-covered) .hero-copy p{color:var(--teal-dark)}
.trip-hero h1{font-weight:600;letter-spacing:-.04em}
.side-nav{background:#eef3ee;border:1px solid var(--line);padding:6px;border-radius:15px}
.side-nav button{font-weight:500;border-radius:10px;min-height:44px}
.side-nav button.active{background:var(--teal-dark);color:#fff;box-shadow:none}
.side-nav button:not(.active):hover{background:#e1ebe0}
.side-note{font-size:12px;line-height:1.8}
.content-title h2{font-weight:600;letter-spacing:-.035em}
.overview-square{background:#fff;box-shadow:none;border-color:var(--line)}
.overview-square:hover,.overview-square[aria-expanded="true"]{background:#f1f6eb;border-color:#adc29e}
.flight-square:hover,.flight-square[aria-expanded="true"]{background:#f0f5f8;border-color:#a7c0ce}
.stay-square:hover,.stay-square[aria-expanded="true"]{background:#edf5ee;border-color:#a6c5aa}
.square-heading{font-weight:600}
.compact-day{box-shadow:none;background:#fff}
.compact-day .day-number{background:#e5efdf;color:#3b6341;font-weight:600}
.day-date{font-weight:600}
.day-count{background:#edf3e9;color:#356843;font-weight:500}
.region-badge{font-weight:600}
.item-card{background:#fff;box-shadow:none;border-color:var(--line)}
.item-card h4{font-weight:600}
.stay-card{background:#eee9df;border-color:#d6ccb9}
.category-badge{font-weight:500}
.expense-summary,.expense-preview{background:#e8f1e5}
.expense-summary small{color:#526d50}
.expense-member:has(input:checked){background:#e8f1e5;border-color:#9cba94}
.login-card{background:#fff;border-color:var(--line);box-shadow:0 16px 50px #2443320b;border-radius:24px}
.login-card h1{font-weight:600}
.keypad button{font-weight:500;background:#eff4ed;color:#244c34}
.keypad button:hover,.keypad button:active{background:#dfeada}
.pin-dots span{border-color:#b9cbb5}
.welcome-check{background:var(--teal);box-shadow:0 12px 30px #2d73581a}
.modal{background:#fff;box-shadow:0 20px 65px #1b352820}
.modal-head h2{font-weight:600;letter-spacing:-.025em}
.input,textarea,select{border-color:#d5e0d5;background:#fff}
.input:focus,textarea:focus,select:focus{border-color:#6a9973;box-shadow:0 0 0 3px #2d735810}
.member-add{background:#f0f5ed}
.permission-row{background:#f5f8f3}
.pin-badge{background:#e8f0e4}
.footer{color:#738579}
.home-version{font-size:11px;color:#738579;margin-top:28px}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #3f8054;outline-offset:3px}
@media(max-width:800px){
  .home-hero{padding:28px 0 36px;gap:14px}
  .hero-art.home-world{min-height:150px}
}
@media(max-width:550px){
  .topbar{height:64px}
  .home-hero{padding:14px 0 30px;gap:8px}
  .hero-art.home-world{min-height:130px}
  .home-world-map{max-width:300px}
  .home-world-map figcaption{margin-top:0;gap:3px 12px}
  .home-world-map figcaption a{font-size:11px;min-height:44px}
  .home-hero h1{font-size:36px;line-height:1.22;margin:8px 0 12px}
  .home-hero p{font-size:13px;margin-bottom:17px}
  .home-hero .hero-actions{gap:8px}
  .home-hero .button{font-size:13px;padding:10px 13px}
  .section-head h2{font-size:23px}
  .section-head{gap:10px}
  .section-head .button.small{font-size:11px;padding:8px 10px}
  .trip-grid{gap:12px;grid-template-columns:1fr}
  .trip-cover-tile .trip-cover-copy h3{font-size:21px}
  .trip-hero h1{font-size:29px}
  .trip-hero .button.small{font-size:12px;padding:8px 11px}
  .footer{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.button,.trip-tile.trip-cover-tile{transition:none}.trip-cover-tile:hover{transform:none}}

/* Keep daily plans dense: one desktop row, two predictable mobile rows. */
.plan-content .plan-heading{margin-bottom:10px}
.plan-content .content-title{align-items:center;flex-wrap:nowrap;gap:8px;margin-bottom:5px}
.plan-content .content-title h2{font-size:25px;white-space:nowrap}
.plan-content .plan-controls{margin:0;gap:2px;flex-wrap:nowrap;white-space:nowrap}
.plan-content .plan-controls .text-button{min-height:36px;padding:5px 6px}
.plan-content .quick-add{margin:0;gap:6px}
.plan-content .quick-add .text-button{min-height:34px;padding:5px 10px}
.plan-content .compact-days{gap:5px}
.plan-content .compact-day{border-left-width:4px;border-radius:12px}
.plan-content .compact-day>summary{grid-template-columns:auto auto minmax(0,1fr) auto 16px;grid-template-areas:"number date preview count chevron";gap:8px;padding:8px 52px 8px 10px;min-height:44px}
.plan-content .day-number{grid-area:number;font-size:10px;line-height:1.4;white-space:nowrap;padding:3px 6px;border-radius:6px}
.plan-content .day-date{grid-area:date;font-size:14px;white-space:nowrap;min-width:0}
.plan-content .day-count{grid-area:count;font-size:10px;line-height:1.4;padding:3px 5px}
.plan-content .day-chevron{grid-area:chevron;display:grid;place-items:center;font-size:14px}
.plan-content .day-preview{grid-area:preview;display:flex;align-items:center;gap:6px;min-width:0}
.plan-content .day-preview .region-badge{max-width:45%;flex:0 1 auto;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:1.4;padding:3px 6px}
.plan-content .day-preview .day-summary{flex:1;min-width:0;padding:0;font-size:12px;line-height:1.5}
.plan-content .day-shell:not(:has(>.day-add)) .compact-day>summary{padding-right:10px}
.plan-content .day-add{top:4px;right:5px;width:40px;height:40px;border-radius:9px;box-shadow:none;font-weight:500}
.plan-content .compact-day .day-line{padding:2px 7px 4px}
.plan-content .region-edit{margin:0 0 3px auto;padding:4px 6px;min-height:28px}
.plan-content .compact-day .plan-item{padding:9px 10px;margin-bottom:5px;gap:8px;border-radius:10px}
.plan-content .plan-item .plan-title-row{display:block;line-height:1.5}
.plan-content .plan-item .plan-title-row h4{display:inline;font-size:14px;line-height:1.5;margin:0}
.plan-content .plan-item .category-badge{font-size:10px;line-height:1.4;padding:2px 6px;margin-right:5px;vertical-align:1px}
.plan-content .plan-item .category-badge .ui-icon{width:11px;height:11px}
.plan-content .plan-item .time{font-size:12px;min-width:39px;padding-top:2px}
.plan-content .plan-item p{font-size:13px;line-height:1.5;margin-top:3px}
.plan-content .plan-item .meta{font-size:11px;line-height:1.5;gap:3px 8px;margin-top:5px}
.plan-content .plan-item :is(h4,p,.meta){overflow-wrap:anywhere}
@media(max-width:800px){
  .trip-layout:has(.plan-content){gap:12px;margin-top:12px}
  .trip-layout:has(.plan-content) .side-nav{padding:3px;gap:2px}
  .trip-layout:has(.plan-content) .side-nav button{padding:9px 12px;font-size:13px}
}
@media(max-width:550px){
  #app:has(.plan-content) .trip-hero{min-height:160px;padding:18px 20px}
  #app:has(.plan-content) .trip-hero .eyebrow{display:none}
  #app:has(.plan-content) .trip-hero h1{font-size:26px;margin:4px 0 8px}
  #app:has(.plan-content) .trip-hero p{font-size:12px;line-height:1.5}
  #app:has(.plan-content) .trip-hero .hero-actions{margin-top:12px;gap:6px}
  #app:has(.plan-content) .trip-hero .access-pill{font-size:11px;padding:6px 10px}
  .plan-content .content-title h2{font-size:21px}
  .plan-content .plan-controls .text-button{font-size:11px;padding:5px 4px}
  .plan-content .compact-day>summary{grid-template-columns:auto minmax(0,1fr) auto 16px;grid-template-areas:"number date count chevron" "preview preview preview preview";row-gap:4px;column-gap:7px;padding-top:7px;padding-bottom:7px;min-height:62px}
  .plan-content .day-preview .region-badge{max-width:44%}
  .plan-content .day-add{top:5px}
}