/* Staymark tracker — the app surface (web /app and the phone shell). */
.app{padding-top:22px;padding-bottom:40px}
.app-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.app-hello h1{font-size:clamp(34px,5vw,52px)}
.app-hello p{margin:6px 0 0}

/* status board */
.board{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rule{position:relative;overflow:hidden;padding:18px 18px 16px}
.rule .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rule .name{font:700 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.rule .flag{font-size:20px;line-height:1;margin-right:6px;vertical-align:-3px}
.rule .mid{display:flex;align-items:center;gap:16px;margin:14px 0 10px}
.ring{width:92px;height:92px;flex:none}
.ring circle{fill:none;stroke-width:9}
.ring .trk{stroke:var(--paper-2)}
.ring .val{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.ring.warn .val{stroke:var(--warn)}.ring.bad .val{stroke:var(--bad)}.ring.idle .val{stroke:var(--line-2)}
.ring .plan{stroke:var(--gold-2);stroke-linecap:round;opacity:.55}
.num{font:400 52px/0.9 var(--display);letter-spacing:-.02em}
.num small{font:500 15px/1 var(--sans);color:var(--mut);letter-spacing:0;margin-left:4px}
.rule .line{font-size:14.5px;color:var(--mut);margin:0}
.rule .line b{color:var(--ink);font-weight:650}
.rule .line.bad b,.rule .line .bad{color:var(--bad)}
.rule.dim .num{color:var(--faint)}
.rule .tick{position:absolute;right:-18px;bottom:-26px;font:400 120px/1 var(--display);color:var(--paper-2);pointer-events:none;z-index:0;opacity:.6}
.rule>*{position:relative;z-index:1}

/* layout */
.cols{display:grid;gap:16px;margin-top:16px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.stack{display:grid;gap:16px}

/* log-a-trip form */
.logform{display:grid;gap:12px;grid-template-columns:1.4fr 1fr 1fr}
.logform .wide{grid-column:1/-1}
@media (max-width:560px){.logform{grid-template-columns:1fr 1fr}.logform .country{grid-column:1/-1}}
.cwrap{position:relative}
.cwrap .cflag{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;pointer-events:none}
.cwrap input,.cwrap select{padding-left:42px}
.cwrap select{font-weight:600}
.cwrap select:invalid,.cwrap select option[value=""]{color:var(--faint);font-weight:400}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 13.5px/1 var(--sans);padding:8px 11px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.preview{border-radius:10px;padding:13px 14px;background:var(--paper-2);font-size:15px;display:none}
.preview.on{display:block}
.preview.ok{background:var(--ok-soft)}.preview.bad{background:var(--bad-soft)}.preview.warn{background:var(--warn-soft)}
.preview p{margin:2px 0}
.preview .head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:650}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ribbon */
.ribbon{display:grid;grid-template-columns:repeat(var(--cols,90),1fr);gap:3px;margin:12px 0 8px}
.ribbon i{display:block;aspect-ratio:1;border-radius:2px;background:var(--paper-2)}
.ribbon i.p{background:var(--brand)}
.ribbon i.f{background:repeating-linear-gradient(135deg,var(--gold-2) 0 2px,transparent 2px 4px);outline:1px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:-1px}
.ribbon i.x{background:var(--bad)}
.ribbon i.t{outline:2px solid var(--ink);outline-offset:1px}
.ribbon-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.ribbon-legend span{display:inline-flex;align-items:center;gap:6px}
.ribbon-legend i{width:10px;height:14px;border-radius:2px;display:inline-block;background:var(--paper-2)}
.ribbon-legend i.p{background:var(--brand)}
.ribbon-legend i.f{background:repeating-linear-gradient(135deg,var(--gold-2) 0 2px,transparent 2px 4px);outline:1px solid var(--gold)}
.ribbon-months{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}

/* trips */
.trips{list-style:none;margin:0;padding:0}
.trips h4{font:700 12px/1 var(--sans);letter-spacing:.16em;color:var(--faint);margin:16px 0 6px}
.trip>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.trip{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.trip:first-of-type{border-top:0}
.trip .f{font-size:22px;line-height:1}
.trip .c{font-weight:650}
.trip .d{font-size:13.5px;color:var(--mut)}
.trip .n{font:400 24px/1 var(--display)}
.trip .n small{font:500 12px var(--sans);color:var(--mut);margin-left:2px}
.trip .tag{font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--paper-2);color:var(--mut);margin-left:6px;vertical-align:2px}
.trip .tag.plan{background:color-mix(in srgb,var(--gold-2) 28%,transparent);color:var(--ink)}
.trip .x{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;padding:6px 8px;border-radius:8px}
.trip .x:hover{color:var(--bad);background:var(--bad-soft)}

/* empty state */
.blank{text-align:center;padding:38px 22px}
.blank .seal{width:86px;height:86px;margin:0 auto 14px;opacity:.9}
.blank h3{font-size:32px;margin-bottom:6px}

/* ties */
.ties{display:grid;gap:8px;margin:8px 0}
.ties label{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.ties label small{display:block;color:var(--mut);font-size:13px}
details.more>summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:14.5px;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:" ↓";font-weight:400}
details.more[open]>summary::after{content:" ↑"}

.acct{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r);border:1px dashed var(--line-2);background:color-mix(in srgb,var(--card) 60%,transparent)}
.acct p{margin:0;font-size:14.5px}
.demo-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:color-mix(in srgb,var(--gold-2) 22%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding:12px 16px;border-radius:var(--r);margin-bottom:14px;font-size:14.5px}
.demo-bar p{margin:0}

/* native shell niceties */
.native .sm-top{padding-top:env(safe-area-inset-top);position:static}
.native .app{padding-bottom:calc(40px + env(safe-area-inset-bottom))}

.board-empty{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:14px 18px;font-size:15px}
.board-empty b{font:400 26px/1 var(--display)}
@media (max-width:560px){
  .app{padding-top:14px}
  .app-hello{margin:2px 0 12px}
  .board{gap:10px}
  .rule{padding:14px 14px 12px}
  .rule .mid{margin:8px 0 6px;gap:12px}
  .ring{width:62px;height:62px}
  .num{font-size:40px}
  .rule .line{font-size:13.5px}
  .rule .stamp{font-size:10px;padding:5px 7px 4px}
  .panel{padding:16px}
}
/* phone shell: a paper strip under the status bar so scrolled content never shows through it */
.native::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--paper);z-index:50}