/* ============================================================
   DESIGN DELULU — Research Observation Intake
   Reuses the brand tokens, type, and form/button patterns from
   the main designdelulu.com stylesheet. Internal tool, same look.
   ============================================================ */

:root{
  --paper:#FBFAF8;
  --ink:#141413;
  --pink:#FF2D78;
  --graphite:#5C5852;
  --mist:#F0EEE8;
  --line:#E3E0D8;

  --font-display:"Bricolage Grotesque", Georgia, serif;
  --font-body:"Instrument Sans", -apple-system, Segoe UI, sans-serif;

  --max-w:640px;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,20,19,.08);
  --ease:cubic-bezier(.22,.61,.21,1);

  /* Site is light-first; tell iOS Safari not to re-theme native form
     controls (date picker icon, etc.) based on system dark mode. */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{overflow-x:hidden}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max-w);margin:0 auto;padding:32px 20px 64px}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand .mark{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:var(--ink);text-decoration:none;
}
.brand .mark .pink{color:var(--pink)}
.brand .sub{font-size:.82rem;color:var(--graphite)}

h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.6rem,5vw,2.1rem);margin-bottom:8px}
p.lead{color:var(--graphite);font-size:1rem;margin-bottom:28px}

.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pink);margin-bottom:10px;
}

/* ---------- Card ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow);
}

/* ---------- Form ---------- */
form label{display:block;font-weight:600;font-size:.92rem;margin:20px 0 6px}
form label:first-of-type{margin-top:0}
form .req{color:var(--pink)}
form .optional{color:var(--graphite);font-weight:400;font-size:.85em}
form .hint{font-size:.82rem;color:var(--graphite);margin:2px 0 6px;font-style:italic}

input[type="text"],
input[type="url"],
input[type="password"],
select,
textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:1rem;background:var(--paper);color:var(--ink);
  transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{outline:none;border-color:var(--pink)}
textarea{min-height:96px;resize:vertical}

select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9"><path d="M1 1l6 6 6-6" stroke="%235C5852" stroke-width="2" fill="none" fill-rule="evenodd"/></svg>');
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}

input[type="file"]{
  width:100%;padding:12px;border:1.5px dashed var(--line);border-radius:10px;
  background:var(--mist);font-size:.92rem;
}

/* Date inputs get their own rule, deliberately NOT merged into the
   appearance:none reset above — on iOS Safari, -webkit-appearance:none on
   type="date" breaks the native control and renders as a blank box. */
input[type="date"]{
  width:100%;min-height:48px;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;line-height:1.3;background:var(--paper);color:var(--ink);
  -webkit-appearance:auto;appearance:auto;transition:border-color .2s;
}
input[type="date"]:focus{outline:none;border-color:var(--pink)}

.confidence-scale{display:flex;gap:8px;margin-top:2px}
.confidence-scale input{position:absolute;opacity:0;pointer-events:none}
.confidence-scale label{
  flex:1;text-align:center;margin:0;padding:14px 0;border:1.5px solid var(--line);border-radius:10px;
  font-weight:700;font-family:var(--font-display);cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.confidence-scale input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.confidence-scale input:focus-visible + label{border-color:var(--pink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-size:1rem;text-decoration:none;
  padding:16px 28px;border-radius:999px;border:2px solid var(--ink);
  transition:transform .2s var(--ease), background .2s, color .2s, box-shadow .2s;
  cursor:pointer;text-align:center;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--pink);border-color:var(--pink);box-shadow:0 8px 20px rgba(255,45,120,.25)}
.btn-pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn-pink:hover{background:var(--ink);border-color:var(--ink)}
.btn-block{display:block;width:100%;margin-top:28px}

/* ---------- Errors / notices ---------- */
.error-banner{
  background:rgba(255,45,120,.06);border:1px solid rgba(255,45,120,.3);border-radius:10px;
  padding:14px 16px;color:var(--ink);font-size:.92rem;margin-bottom:20px;
}
.error-banner strong{color:var(--pink)}
.field-error{color:var(--pink);font-size:.82rem;margin-top:4px}

/* ---------- URL preview card ---------- */
.url-preview{
  display:none;margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--mist);
}
.url-preview.visible{display:flex}
.url-preview img{width:96px;height:96px;object-fit:cover;flex:0 0 96px;background:var(--line)}
.url-preview .body{padding:10px 14px;min-width:0}
.url-preview .title{font-weight:700;font-size:.9rem;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url-preview .desc{font-size:.8rem;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.url-preview .canonical{font-size:.74rem;color:var(--pink);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.url-preview-status{font-size:.8rem;color:var(--graphite);margin-top:6px}

/* ---------- Success page ---------- */
.success-card{text-align:center;padding:44px 28px}
.success-card .check{
  width:56px;height:56px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.6rem;
}
.success-card h1{margin-bottom:10px}
.success-card .obs-id{
  font-family:var(--font-display);font-weight:700;background:var(--mist);border-radius:8px;
  padding:10px 14px;display:inline-block;margin:14px 0 26px;font-size:.95rem;word-break:break-all;
}

/* ---------- App shell (dashboard, list, detail, edit pages) ---------- */
.wrap-app{max-width:760px}
.topbar{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}

.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.topbar .brand{margin-bottom:0;text-decoration:none;min-width:0;overflow:hidden}
.topbar .brand .mark,.topbar .brand .sub{white-space:nowrap}
.logout-link{
  flex:0 0 auto;font-size:.78rem;font-weight:500;color:var(--graphite);text-decoration:none;
  padding:5px 4px;white-space:nowrap;
}
.logout-link:hover{color:var(--ink)}

.app-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:8px}
.app-nav a{font-size:.9rem;font-weight:600;color:var(--graphite);text-decoration:none;padding:5px 0;border-bottom:2px solid transparent}
.app-nav a:hover{color:var(--ink)}
.app-nav a.active{color:var(--ink);border-bottom-color:var(--pink)}

.app-main{display:flex;flex-direction:column;gap:20px}
.app-main .card{margin-bottom:0}
.app-main h1{margin-bottom:4px}

/* ---------- Dashboard ---------- */
.cta-new{margin:0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-tile{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;
}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1}
.stat-label{font-size:.82rem;color:var(--graphite)}

.platform-breakdown{list-style:none}
.platform-breakdown li{
  display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;
}
.platform-breakdown li:last-child{border-bottom:0}
.platform-breakdown strong{font-family:var(--font-display)}

.card-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-head-row h3{margin:0}
.see-all{font-size:.85rem;font-weight:600;color:var(--pink);text-decoration:none}

.obs-mini-list{list-style:none}
.obs-mini-list li + li{border-top:1px solid var(--line)}
.obs-mini-list a{
  display:flex;align-items:center;gap:10px;padding:12px 0;text-decoration:none;color:var(--ink);
}
.obs-mini-id{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--graphite);flex:0 0 auto}
.obs-mini-topic{flex:1;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Status badges ---------- */
.status-badge{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:5px 12px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);white-space:nowrap;
}
.status-new{background:var(--paper);border-color:var(--line);color:var(--graphite)}
.status-expanded{background:var(--mist);border-color:var(--ink);color:var(--ink)}
.status-verified{background:var(--paper);border-color:var(--pink);color:var(--pink)}
.status-experimented{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.status-implemented{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---------- Pills / tags ---------- */
.pill{
  display:inline-block;font-size:.76rem;font-weight:600;color:var(--graphite);
  background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
}
.tag-chips{display:flex;flex-wrap:wrap;gap:8px}
.tag-chip{
  font-size:.8rem;font-weight:600;color:var(--ink);background:var(--mist);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}

/* ---------- Observation list + filters ---------- */
.filters-wrap{margin-bottom:2px}

/* The row itself is always laid out so the Clear link (below) stays visible
   whenever filters are active, with or without JS. Only the toggle button
   is a progressive-enhancement, mobile-only affordance — see the media
   query further down, gated on the .js-filters class from
   includes/filters-script.php. Without JS the filters panel just stays
   visible and fully usable, same as before this feature existed. */
.filters-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.filters-toggle{
  display:none;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:10px 16px;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;
  font-family:var(--font-body);
}
.filters-toggle:hover{border-color:var(--ink)}
.filters-active-badge{
  font-size:.66rem;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--pink);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.filters-toggle-icon{font-size:.7rem;color:var(--graphite);transition:transform .2s var(--ease);display:inline-block}
.filters-toggle[aria-expanded="true"] .filters-toggle-icon{transform:rotate(180deg)}
.filters-clear{flex:0 0 auto;font-size:.86rem;font-weight:600;color:var(--graphite);text-decoration:none;padding:8px 4px}
.filters-clear:hover{color:var(--ink)}

/* Collapsed state is only ever applied by JS — the observation list below
   is a separate sibling element and is never affected by this. */
.filters-panel.js-collapsed{display:none}

.filters-bar{
  display:flex;flex-wrap:wrap;gap:12px 10px;padding:16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--mist);
}
.filter-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:0}
.filter-label{font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--graphite)}
.filter-field input,.filter-field select{width:100%;min-width:0;padding:11px 14px;font-size:.92rem;background:var(--paper)}
.filter-actions{flex:1 1 100%;display:flex}
.filter-actions .btn{padding:11px 22px;font-size:.92rem}

/* iOS Safari can render a *filled* date input (e.g. "Jul 2, 2026") wider
   than its CSS width once a value is set, ignoring width:100% on the input
   itself. Moving the visible chrome to this wrapper and clipping it here
   guarantees the control can never visually escape its column, regardless
   of how the native control sizes itself internally. */
.date-field-clip{
  width:100%;overflow:hidden;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);
}
.date-field-clip input[type="date"]{
  display:block;width:100%;min-width:0;border:0;border-radius:0;background:transparent;padding:11px 14px;
}
.date-field-clip input[type="date"]:focus{border:0;outline:none}
.date-field-clip:focus-within{border-color:var(--pink)}

.obs-list{display:flex;flex-direction:column;gap:10px}
.obs-row{
  display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.obs-row:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.obs-row-main{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.obs-row-id{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--graphite)}
.obs-row-topic{font-weight:600;font-size:1rem}
.obs-row-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--graphite)}

.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px;font-size:.9rem}
.pagination a{color:var(--pink);font-weight:600;text-decoration:none}
.pagination span{color:var(--graphite)}

/* ---------- Observation detail ---------- */
.obs-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.obs-detail-head h1{margin-bottom:6px}
.obs-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.obs-detail-actions .btn{padding:10px 20px;font-size:.9rem}

.obs-field-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.obs-field-row:last-of-type{border-bottom:0}
.obs-field-row span{color:var(--graphite)}

/* Long raw URLs (source links, etc.) must never force horizontal scroll. */
.card p a{word-break:break-word;overflow-wrap:break-word}

.pre-block{white-space:pre-wrap;font-size:.92rem;line-height:1.6}

.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:6px}
.screenshot-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.screenshot-grid-existing{margin-bottom:8px}

.notice-banner{
  background:rgba(255,45,120,.06);border:1px solid rgba(255,45,120,.3);border-radius:10px;
  padding:12px 16px;color:var(--ink);font-size:.9rem;font-weight:600;
}

/* ---------- Future-proofing placeholders ---------- */
.placeholder-card{opacity:.7;border-style:dashed}
.placeholder-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.placeholder-head h3{margin:0}
.coming-soon{
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);
  background:var(--mist);border-radius:999px;padding:4px 10px;white-space:nowrap;
}

/* ---------- Export (reserved) ---------- */
.export-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-ghost-link{
  display:inline-block;font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none;
  border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;transition:border-color .2s,color .2s;
}
.btn-ghost-link:hover{border-color:var(--pink);color:var(--pink)}

/* ---------- Success page actions ---------- */
.success-card .obs-id{margin-bottom:0}
.success-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.success-actions .btn{margin-top:0}

@media (max-width:640px){
  .obs-detail-head{flex-direction:column}

  /* The compact toggle button only appears once JS confirms it can drive
     the collapse. Without JS, .filters-panel is never given .js-collapsed,
     so the full filter form just stays visible and usable at all widths —
     and the Clear link (outside this rule) is unaffected either way. */
  .js-filters .filters-toggle{display:inline-flex}

  /* Stack filter fields one per row on phones. Native iOS date inputs have
     a hard minimum rendering width that CSS can't compress — packing two
     fields per row is what caused the "From date"/"To date" boxes to
     overflow their card on real devices, so give every field full width. */
  .filter-field{flex:1 1 100%}
}

/* Mobile polish — covers the iPhone 390–430px range with margin either side. */
@media (max-width:480px){
  .wrap{padding:20px 16px 44px}
  .wrap-app{padding-bottom:36px}
  .confidence-scale{gap:6px}

  .topbar{gap:10px;padding-bottom:12px;margin-bottom:18px}
  .app-nav{gap:12px;row-gap:6px}

  .app-main{gap:14px}
  .card{padding:18px 16px}
  p.lead{margin-bottom:18px}
  h1{margin-bottom:6px}

  .filters-bar{padding:14px;gap:10px}
}

@media (max-width:360px){
  /* Guarantees room for "Design Delulu" + Log out on one row on the
     narrowest phones without ever wrapping or overflowing. */
  .topbar .brand .sub{display:none}
}