/* style.css — Ripstop technical styleguide + Packwise layout */

:root{
  color-scheme:light;
  --fabric:#DEE5E0;
  --fabric-deep:#CDD6D0;
  --panel:#FAFCFA;
  --panel-raised:#FFFFFF;
  --ink:#131C18;
  --ink-soft:#5E6B64;
  --pine:#1D4A3D;
  --pine-lift:#2A6653;
  --pine-wash:#E0EEE8;
  --tag:#C48A06;
  --tag-wash:#F8E9B8;
  --seam:rgba(19,28,24,.15);
  --seam-strong:rgba(19,28,24,.25);
  --stitch:rgba(19,28,24,.13);
  --grid:rgba(19,28,24,.06);
  --thread:rgba(19,28,24,.035);
  --shadow:0 1px 2px rgba(19,28,24,.12);
  --pad:14px;
  --pad-lg:18px;
  --gap:12px;
  --gap-sm:8px;
  --r-panel:8px;
  --r-ctl:6px;
  --r-pill:999px;
  --preview-pine:#1D4A3D;
}

:root[data-theme="dark"],.popchat-theme-dark{
  color-scheme:dark;
  --fabric:#0F1A16;
  --fabric-deep:#08110E;
  --panel:#17261F;
  --panel-raised:#20352B;
  --ink:#E4EBE5;
  --ink-soft:#93A69B;
  --pine:#6FBFA0;
  --pine-lift:#8AD4B6;
  --pine-wash:#1D3C30;
  --tag:#E8B31A;
  --tag-wash:#453813;
  --seam:rgba(228,235,229,.15);
  --seam-strong:rgba(228,235,229,.25);
  --stitch:rgba(228,235,229,.13);
  --grid:rgba(228,235,229,.06);
  --thread:rgba(228,235,229,.035);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --preview-pine:#6FBFA0;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not(.popchat-theme-light){
    color-scheme:dark;
    --fabric:#0F1A16;
    --fabric-deep:#08110E;
    --panel:#17261F;
    --panel-raised:#20352B;
    --ink:#E4EBE5;
    --ink-soft:#93A69B;
    --pine:#6FBFA0;
    --pine-lift:#8AD4B6;
    --pine-wash:#1D3C30;
    --tag:#E8B31A;
    --tag-wash:#453813;
    --seam:rgba(228,235,229,.15);
    --seam-strong:rgba(228,235,229,.25);
    --stitch:rgba(228,235,229,.13);
    --grid:rgba(228,235,229,.06);
    --thread:rgba(228,235,229,.035);
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --preview-pine:#6FBFA0;
  }
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  color:var(--ink);
  background-color:var(--fabric);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 19px,var(--grid) 19px 20px),
    repeating-linear-gradient(90deg,transparent 0 19px,var(--grid) 19px 20px),
    repeating-linear-gradient(0deg,transparent 0 3px,var(--thread) 3px 4px),
    repeating-linear-gradient(90deg,transparent 0 3px,var(--thread) 3px 4px);
  font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-size:1.5rem;line-height:1;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
h2{font-size:1.05rem;line-height:1.25;font-weight:600;letter-spacing:-.004em}
h3{font-size:.95rem;font-weight:600;letter-spacing:-.004em}
button,input,select{font:inherit}
button{cursor:pointer}
.eyebrow,.button,.field>span,.summary-stats small,.person-sub,.catalog-item small,.bag-head small,.drop-hint,.qty,.search-icon,.badge,.chip,.tab,.add-bag{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.eyebrow{margin:0 0 6px;color:var(--ink-soft);font-size:.6rem;line-height:1.1;letter-spacing:.15em;text-transform:uppercase}

.app-shell{height:100dvh;max-width:1600px;margin:auto;padding:22px 30px 70px;display:flex;flex-direction:column;gap:18px;min-width:0}
.topbar,.side-heading,.content-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{width:42px;height:42px;border-radius:var(--r-panel);background:var(--pine);display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:var(--shadow)}
.brand-mark i{width:4px;border-radius:var(--r-pill);background:var(--panel)}
.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:24px}.brand-mark i:nth-child(3){height:17px}
.top-actions{display:flex;align-items:center;gap:8px}

.panel{position:relative;background:var(--panel);border:1px solid var(--seam);border-radius:var(--r-panel);box-shadow:var(--shadow)}
.panel:not(.flush)::before{content:"";position:absolute;inset:4px;border:1px dashed var(--stitch);border-radius:var(--r-ctl);pointer-events:none}
.panel>*{position:relative}

.button{min-height:44px;padding:0 15px;border:1px solid var(--seam);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font-size:.68rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;transition:background .18s,border-color .18s,color .18s,transform .18s}
.button:hover{border-color:var(--pine);background:var(--fabric-deep);transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button:focus-visible,.chip:focus-visible,.icon-button:focus-visible,.tiny-remove:focus-visible,.remove-item:focus-visible,.check:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--tag);outline-offset:2px}
.button.primary{background:var(--pine);border-color:var(--pine);color:var(--panel)}
.button.primary:hover{background:var(--pine-lift);border-color:var(--pine-lift)}
.button.ghost{background:transparent}
.button.small{min-height:40px;padding:0 13px}
.file-button{display:flex;align-items:center}
.file-button input{display:none}

.trip-bar{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.trip-title{display:flex;align-items:center;gap:13px;min-width:230px}
.round-icon{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--tag-wash);color:var(--tag);font-size:20px}
.trip-preview{width:104px;height:70px;border-radius:var(--r-ctl);overflow:hidden;background:var(--fabric-deep);border:1px solid var(--seam);position:relative;flex:none}
.trip-preview canvas{width:100%;height:100%;display:block}
.trip-preview span{position:absolute;inset:0;display:grid;place-items:center;color:var(--pine);font:400 .62rem ui-monospace,monospace}
.trip-controls{display:flex;align-items:end;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;color:var(--ink-soft)}
.field>span{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
.field input,.field select,.person-settings select,.custom-row input,.search-wrap input{height:42px;padding:0 11px;border:1px solid transparent;border-radius:var(--r-ctl);background:var(--fabric-deep);color:var(--ink);outline:none;transition:border-color .18s,background .18s}
.field input:focus,.field select:focus,.person-settings select:focus,.custom-row input:focus,.search-wrap input:focus{border-color:var(--pine);background:var(--panel)}
.compact input{width:150px}.days-field input{width:65px}.recalc{height:42px}

.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;min-height:0;flex:1}
.sidebar{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:21px}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);padding:5px 10px;font-size:.65rem;font-variant-numeric:tabular-nums}
.badge.tagged{background:var(--tag);color:var(--panel)}.badge.quiet{background:var(--fabric-deep);color:var(--ink-soft)}
.search-wrap{position:relative;margin:19px 0 13px}
.search-wrap input{width:100%;padding-left:38px}
.search-icon{position:absolute;left:13px;top:7px;font-size:22px;color:var(--ink-soft)}
.category-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.chip,.tab{padding:7px 10px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--ink-soft);font-size:.64rem;transition:background .18s,color .18s,transform .18s}
.chip:hover,.chip.active,.tab:hover,.tab.active{background:var(--pine);color:var(--panel);transform:translateY(-1px)}
.catalog{min-height:0;overflow:auto;padding-right:4px}
.catalog::-webkit-scrollbar,.content::-webkit-scrollbar{width:7px}
.catalog::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{background:var(--seam-strong);border-radius:var(--r-pill)}
.catalog-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:grab;transition:.16s}
.catalog-item:active{cursor:grabbing}
.catalog-item:hover{background:var(--fabric-deep);border-color:var(--seam);transform:translateX(3px)}
.catalog-item strong{display:block;font-size:13px;font-weight:600}
.catalog-item small{color:var(--ink-soft);font-size:10px}
.catalog-item b{margin-left:auto;color:var(--pine);font-size:18px;font-weight:400}
.item-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-ctl);font:700 .58rem ui-monospace,monospace}
.cat-toiletries{background:color-mix(in srgb,var(--pine) 14%,transparent);color:var(--pine)}
.cat-clothing{background:color-mix(in srgb,var(--pine) 14%,transparent);color:var(--pine)}
.cat-business{background:color-mix(in srgb,var(--tag) 14%,transparent);color:var(--tag)}
.cat-health{background:color-mix(in srgb,var(--tag) 12%,transparent);color:var(--tag)}
.cat-tech{background:color-mix(in srgb,var(--pine) 12%,transparent);color:var(--pine)}
.cat-essentials,.cat-accessories{background:color-mix(in srgb,var(--tag) 14%,transparent);color:var(--tag)}
.no-results{color:var(--ink-soft);font-size:12px;padding:22px 4px}
.custom-add{border-top:1px solid var(--stitch);padding-top:16px;margin-top:13px}
.custom-row{display:flex;gap:7px}.custom-row input{min-width:0;flex:1}

.content{min-height:0;overflow:auto;padding-right:4px}
.content-head{margin:2px 3px 17px}
.summary-stats{display:flex;gap:22px}
.summary-stats span{display:flex;flex-direction:column;text-align:right}
.summary-stats b{font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.summary-stats small{color:var(--ink-soft);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.person-card{padding:19px;margin-bottom:17px;animation:rise .32s ease both}
.person-head{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--pine);color:var(--panel);font-weight:800}
.person-meta{flex:1;min-width:0}
.person-name{width:100%;max-width:280px;padding:2px 0;border:0;background:transparent;color:var(--ink);font-size:16px;font-weight:700;outline:none}
.person-sub{margin-top:4px;color:var(--ink-soft);font-size:11px}
.person-sub b{color:var(--pine)}
.person-actions{display:flex;gap:5px}
.icon-button,.tiny-remove,.remove-item{padding:8px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-soft);font-size:11px;transition:.18s}
.icon-button:hover,.tiny-remove:hover,.remove-item:hover{background:var(--fabric-deep);color:var(--tag)}
.person-settings{display:flex;gap:10px;margin:17px 0 13px;padding:13px;border-radius:var(--r-ctl);background:var(--fabric-deep);border:1px dashed var(--stitch)}
.person-settings label{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font:400 .62rem ui-monospace,monospace}
.person-settings select{height:34px;padding:0 8px;font-size:11px}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.bag-zone,.loose-zone{min-height:148px;padding:12px;border:1px dashed var(--stitch);border-radius:var(--r-ctl);background:var(--fabric-deep);transition:.2s}
.bag-zone.drag-over,.loose-zone.drag-over{border-color:var(--pine);background:var(--pine-wash)}
.bag-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.bag-head strong{display:block;font-size:12px;font-weight:700}
.bag-head small{display:block;margin-top:2px;color:var(--ink-soft);font-size:10px}
.bag-icon{width:32px;height:32px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--pine);color:var(--panel);font:700 .58rem ui-monospace,monospace}
.bag-icon.loose{background:var(--panel);color:var(--pine)}
.tiny-remove{margin-left:auto;font-size:17px}
.bag-items{display:flex;flex-direction:column;gap:5px}
.packed-item{display:flex;align-items:center;gap:7px;min-height:40px;padding:6px;border:1px solid var(--seam);border-radius:var(--r-ctl);background:var(--panel-raised);cursor:grab;transition:.15s}
.packed-item:active{cursor:grabbing}
.packed-item:hover{border-color:var(--pine)}
.packed-item.is-packed{opacity:.56}
.packed-item .item-icon{width:25px;height:25px;font-size:8px}
.item-name{flex:1;font-size:11px}
.qty{color:var(--ink-soft);font-size:10px;font-variant-numeric:tabular-nums}
.check{width:24px;height:24px;padding:0;border:1px solid var(--seam);border-radius:var(--r-ctl);display:grid;place-items:center;background:transparent;color:var(--pine);font-weight:800}
.is-packed .check{border-color:var(--pine);background:var(--pine);color:var(--panel)}
.remove-item{padding:2px 4px;font-size:16px}
.drop-hint{padding:23px 0;color:var(--ink-soft);font-size:11px;text-align:center}
.add-bag{margin-top:12px;padding:6px;border:0;background:transparent;color:var(--pine);font-size:.65rem}
.empty{padding:58px 20px;text-align:center}
.empty-art{width:54px;height:54px;margin:0 auto 13px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--fabric-deep);color:var(--pine);font-size:30px}
.empty h3{margin:0 0 8px}
.empty p{max-width:360px;margin:0 auto 19px;color:var(--ink-soft);font-size:13px}
.toast{position:fixed;bottom:24px;left:50%;z-index:5;padding:12px 17px;border-radius:var(--r-ctl);background:var(--ink);color:var(--panel);font:400 .68rem ui-monospace,monospace;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:880px){
  .app-shell{padding:17px 16px 68px;gap:15px}
  .trip-bar{align-items:stretch;flex-direction:column}
  .trip-preview{position:absolute;right:20px;top:18px}
  .trip-controls{flex-wrap:wrap}
  .workspace{grid-template-columns:275px minmax(0,1fr)}
}
@media(max-width:600px){
  .topbar{align-items:flex-start}
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .top-actions .button{min-height:40px;padding:0 11px;font-size:.62rem}
  .top-actions .primary{order:-1}
  .workspace{display:flex;flex-direction:column}
  .sidebar{height:292px;flex:none}
  .content{overflow:auto}
  .trip-title h2{font-size:16px}
  .trip-controls{display:grid;grid-template-columns:1fr 70px 1fr}
  .compact{grid-column:1 / 3}
  .compact input{width:100%}
  .recalc{grid-column:1 / -1}
  .person-settings{flex-wrap:wrap}
  .person-settings label{flex:1;min-width:130px;justify-content:space-between}
  .person-actions .icon-button{font-size:0}
  .person-actions .icon-button:after{content:'×';font-size:18px}
  .summary-stats{gap:11px}
  .content-head{align-items:flex-end}
}
@media(max-width:380px){
  .app-shell{padding-left:10px;padding-right:10px}
  .topbar{gap:8px}
  .brand h1{font-size:20px}
  .top-actions{gap:4px}
  .top-actions .ghost{display:none}
  .sidebar{height:277px}
  .trip-bar{padding:15px}
  .bag-grid{grid-template-columns:1fr}
  .person-card{padding:14px}
}