/* Trip Logistics Organizer — branded skin (light/dark). See spec §12. */

/* Self-hosted fonts. Drop the .woff2 files into assets/fonts/ (see README).
   Falls back to system serif/sans if the files are absent. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/Inter-Variable.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2');}

:root{
  --page:#F4ECE1; --card:#FEFCFA; --border:#E4D8C9; --hair:#EFE3D4;
  --text:#333333; --text2:#6E6459; --muted:#A0937F;
  --accent:#E07B33; --accent-soft:#FBEEDC; --accent-border:#E0CBB0; --accent-text:#9A5B14;
  --danger:#B5443A;
  --c-amber:#E07B33; --c-coral:#CB5A5A; --c-teal:#3E7A74;
  --glow-amber:rgba(224,123,51,.18); --glow-coral:rgba(203,90,90,.16); --glow-teal:rgba(62,122,116,.16);
  --tint-amber:#F0D3B4; --tint-coral:#F0CBCB; --tint-teal:#C4DDD8;
  --motif-arc:#D8C7B8; --motif-plane:#BBA88F;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html[data-theme="dark"]{
  --page:#1A1F36; --card:#2B233D; --border:#2E2A44; --hair:#3C3352;
  --text:#FAF0E6; --text2:#B8AEC2; --muted:#8A80A0;
  --accent:#FFB74D; --accent-soft:#2E2A44; --accent-border:#3C3352; --accent-text:#FFB74D;
  --danger:#FF8080;
  --c-amber:#FFB74D; --c-coral:#FF8080; --c-teal:#7FC8C0;
  --glow-amber:rgba(255,183,77,.22); --glow-coral:rgba(255,128,128,.20); --glow-teal:rgba(127,200,192,.20);
  --tint-amber:#3C3352; --tint-coral:#3C3352; --tint-teal:#3C3352;
  --motif-arc:#3A3556; --motif-plane:#5A4E78;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--page);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
.icon{vertical-align:-3px;}

.wrap{max-width:640px;margin:0 auto;padding:20px 18px 60px;}

/* Motif: undulating dashed flight-path spacer. Fixed height so it stays legible on
   mobile; the wave dives behind the first card via the negative bottom margin. */
.motif-band{position:relative;z-index:0;height:88px;margin:2px 0 -30px;pointer-events:none;}
.motif-band .path{position:absolute;inset:0;width:100%;height:100%;opacity:.4;}
.motif-band .plane{position:absolute;left:70%;top:16px;transform:translate(-50%,-50%) rotate(-6deg);opacity:.55;}
/* Cards/headers sit above the motif (positioned elements paint over static ones). */
.tripcard,.item,.dayhdr{position:relative;z-index:1;}

/* Header */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.topbar .back{color:var(--text2);display:inline-flex;}
.title{font-family:var(--serif);font-weight:600;color:var(--text);}
h1.title{font-size:26px;margin:0;line-height:1.05;}
.h-screen{font-size:23px;}
.subtitle{font-size:12px;color:var(--muted);margin:2px 0 18px;}
.spacer{flex:1;}

/* Tabs */
.tabs{display:flex;gap:6px;margin:16px 0 4px;}
.tab{font-size:13px;color:var(--muted);padding:5px 13px;border-radius:20px;}
.tab.on{color:var(--text);background:var(--card);border:1px solid var(--accent-border);}

/* Badge / chips */
.badge{font-size:11px;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-border);padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}

/* Trip card */
.tripcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 15px;box-shadow:0 2px 8px rgba(120,90,50,.06);margin-bottom:11px;color:inherit;}
.tripcard .name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--text);}
.tripcard .meta{font-size:12px;color:var(--muted);margin:1px 0 11px;}
.iconrow{display:flex;align-items:center;gap:13px;}
.iconrow .count{font-size:12px;color:var(--muted);margin-left:auto;}

/* Day header */
.dayhdr{display:flex;align-items:baseline;gap:8px;margin:16px 0 10px;}
.dayhdr .d{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--text);}
.dayhdr .rule{flex:1;height:0;border-bottom:1px solid var(--border);}

/* Itinerary item card */
.item{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--tint);border-radius:14px;padding:11px 12px;box-shadow:0 3px 12px var(--glow);margin-bottom:15px;color:inherit;}
.type-flight{--tint:var(--tint-amber);--glow:var(--glow-amber);--ic:var(--c-amber);}
.type-rail,.type-car{--tint:var(--tint-coral);--glow:var(--glow-coral);--ic:var(--c-coral);}
.type-lodging{--tint:var(--tint-teal);--glow:var(--glow-teal);--ic:var(--c-teal);}
.type-event,.type-ferry,.type-other{--tint:var(--border);--glow:transparent;--ic:var(--muted);}
.item .tcol{width:52px;flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.item .tbig{font-size:17px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2;}
.item .tz{font-size:11px;color:var(--muted);margin-top:2px;}
.item .sep{width:0;align-self:stretch;border-left:1px solid var(--hair);}
.item .body{min-width:0;flex:1;}
.item .row1{display:flex;align-items:center;gap:6px;}
.item .icn{color:var(--ic);display:inline-flex;}
.item .itype{font-size:14px;font-weight:600;color:var(--text);}
.item .isub{font-size:12px;color:var(--text2);margin-top:2px;}
.item .imeta{font-size:11px;color:var(--muted);margin-top:1px;}
.item.cancelled{opacity:.55;}
.item.cancelled .itype{text-decoration:line-through;}

/* Add / centered link */
.addlink{text-align:center;margin-top:14px;}
.addlink a{font-size:13px;font-weight:500;color:var(--accent);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans);font-size:14px;font-weight:500;border-radius:9px;padding:9px 14px;cursor:pointer;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent-text);}
.btn:hover{filter:brightness(.98);}
.btn.secondary{background:transparent;border-color:var(--border);color:var(--text2);}
.btn.danger{background:transparent;border-color:transparent;color:var(--danger);}
.btn.full{width:100%;}
.btnrow{display:flex;gap:8px;}

/* Forms */
.field{margin-bottom:12px;}
.field label,.lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:0 0 4px;}
.row{display:flex;gap:8px;}
.row > *{flex:1;}
input[type=text],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--text);background:var(--card);
  border:1px solid var(--accent-border);border-radius:8px;padding:9px 10px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow-amber);}
textarea{resize:vertical;min-height:60px;}
.sectlabel{font-size:11px;font-weight:600;color:var(--text2);margin:6px 0 8px;display:flex;align-items:center;gap:5px;}
.formhdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.formhdr .save{font-size:14px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--sans);}
.formhdr .cancel{font-size:13px;color:var(--text2);}
.dangerzone{border-top:1px solid var(--border);margin-top:8px;padding-top:14px;text-align:center;}

/* Settings rows */
.section{font-size:13px;font-weight:600;color:var(--text);margin:22px 0 3px;display:flex;align-items:center;gap:5px;}
.section .icon{color:var(--accent);}
.rowline{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--border);gap:12px;}
.rowline:last-of-type{border-bottom:1px solid var(--border);}
.rowline .x{color:var(--muted);cursor:pointer;background:none;border:none;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.inline-add{display:flex;gap:8px;margin-top:11px;}

/* Login */
.login-card{max-width:340px;margin:12vh auto 0;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 22px;box-shadow:0 4px 18px rgba(120,90,50,.10);}
.login-card h1{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 4px;text-align:center;}
.login-card p{font-size:12px;color:var(--muted);text-align:center;margin:0 0 20px;}
.error{background:rgba(181,68,58,.10);border:1px solid rgba(181,68,58,.30);color:var(--danger);font-size:13px;border-radius:8px;padding:9px 11px;margin-bottom:14px;}

.raw{background:var(--page);border-radius:8px;padding:9px 10px;margin-top:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--text2);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:40px 10px;}
.rawbox{width:100%;box-sizing:border-box;min-height:320px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text);background:var(--card);border:1px solid var(--accent-border);border-radius:10px;padding:10px;line-height:1.5;resize:vertical;}
.rowlink{text-decoration:none;color:inherit;}
.mutelink{color:var(--muted);font-size:13px;}
.iconbtn{background:none;border:none;cursor:pointer;padding:0;color:var(--muted);display:inline-flex;align-items:center;}
.iconbtn:hover{color:var(--accent);}
.flash{font-size:13px;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:10px;padding:8px 12px;margin:10px 0 0;display:flex;align-items:center;gap:6px;}
.flash.err{color:var(--danger);background:transparent;border-color:var(--border-strong);}