@layer base, layout, components, responsive;

@layer base {
  :root { color-scheme:light; --paper:#f5f2e9; --ink:#193c30; --muted:#5e685e; --green:#214d3b; --line:#cbd0c2; --panel:#eaeade; --serif:Georgia,"Times New Roman",serif; }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  button,input,select { font:inherit; }
  button { cursor:pointer; }
  a { color:var(--green); text-underline-offset:4px; }
  button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
  h1,h2,h3,h4,p { margin:0; }
  summary { cursor:pointer; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip-link { position:fixed; left:16px; top:-80px; z-index:10; padding:12px 18px; background:var(--ink); color:white; }
  .skip-link:focus { top:16px; }
}

@layer layout {
  .wrap { max-width:1280px; margin-inline:auto; padding-inline:56px; }
  .site-header { min-height:122px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
  .site-header::after { content:""; position:absolute; bottom:0; inset-inline:56px; border-bottom:1px solid var(--line); }
  .lookup-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:64px; align-items:center; padding:64px 0 52px; }
  .hero { padding-bottom:8px; }
  .search-panel { padding:28px; background:var(--ink); color:var(--paper); border-radius:4px; }
  .category-browser { border-top:1px solid var(--line); padding-top:28px; margin-bottom:36px; }
  .category-list { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; margin-top:18px; }
  .results-section { min-height:250px; scroll-margin-top:24px; }
  .results-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; }
  .results-heading>div { min-width:0; }
  .results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
  .results-grid.single { grid-template-columns:1fr; }
  .site-footer { display:flex; align-items:end; justify-content:space-between; gap:32px; border-top:1px solid var(--line); margin-top:40px; padding-block:24px; font-size:14px; color:var(--muted); }
  .coverage-note { max-width:80ch; }
  .updated { flex-shrink:0; }
  .site-footer time { margin-left:4px; }
}

@layer components {
  .brand { display:inline-flex; min-width:0; align-items:center; gap:14px; color:var(--ink); font-family:inherit; font-weight:400; font-size:42px; letter-spacing:-1.8px; line-height:1.1; text-decoration:none; white-space:nowrap; }
  .brand-mark { display:block; width:48px; height:48px; flex-shrink:0; background:currentColor; mask:url('./unpacked-box.svg') center / contain no-repeat; }
  .language-switch { display:flex; gap:16px; align-items:center; flex-shrink:0; }
  .language-switch button { min-height:44px; padding:8px 0; border:0; border-bottom:1px solid transparent; background:none; color:var(--muted); font-size:14px; }
  .language-switch button[aria-pressed=true] { color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }
  h1 { max-width:11ch; font-family:var(--serif); font-size:clamp(52px,5.5vw,74px); font-weight:400; line-height:1.04; letter-spacing:-3.5px; text-wrap:balance; }
  .hero-description { margin-top:24px; color:var(--muted); max-width:32ch; font-size:17px; line-height:1.65; }
  label { display:block; font-size:17px; font-weight:600; margin-bottom:14px; }
  .search-row { display:flex; align-items:center; border:1px solid transparent; border-radius:3px; padding:5px; background:var(--paper); }
  .search-row:focus-within { outline:2px solid #e8c890; outline-offset:4px; }
  .search-icon { flex-shrink:0; width:20px; height:20px; color:var(--muted); margin-left:10px; }
  .search-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; }
  input[type=search] { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); padding:12px; font-size:17px; }
  input::placeholder { color:var(--muted); opacity:1; }
  .search-button { flex-shrink:0; min-height:46px; border:0; border-radius:2px; padding:10px 18px; background:#dce6cb; color:var(--ink); font-weight:650; font-size:15px; }
  .search-button:hover { background:#c8d8b3; }
  .search-panel button:focus-visible,.search-panel summary:focus-visible,.search-panel a:focus-visible,.search-panel select:focus-visible { outline-color:#e8c890; }
  .search-panel button:focus-visible { outline-color:var(--ink); outline-offset:-4px; }
  .service-controls { border-top:1px solid #537060; margin-top:20px; padding-top:18px; }
  .service-controls label { font-size:14px; font-weight:500; margin-bottom:8px; color:#e3e8db; }
  .service-controls select { display:block; width:100%; min-width:0; border:1px solid #809787; border-radius:2px; padding:10px 12px; background:var(--ink); color:var(--paper); font-size:15px; color-scheme:dark; }
  .service-notice { color:#c9d3c5; font-size:14px; margin-top:10px; }
  .service-resources { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; }
  .service-resources a { color:#e3e8db; font-size:14px; text-underline-offset:3px; overflow-wrap:anywhere; }
  .service-documentation { margin-top:16px; font-size:14px; color:#e3e8db; }
  .service-documentation summary { color:var(--paper); font-weight:500; }
  .service-documentation p { margin-top:12px; }
  .service-documentation a { color:#e3e8db; }
  .category-chip { min-width:0; border:1px solid var(--line); border-radius:3px; padding:10px 8px; color:var(--ink); background:transparent; font-size:14px; min-height:44px; text-wrap:balance; }
  .category-chip:hover { border-color:var(--green); background:var(--panel); }
  .category-chip[aria-pressed=true] { border-color:var(--green); background:var(--green); color:var(--paper); }
  .result-caption { color:var(--muted); font-size:14px; margin-bottom:7px; overflow-wrap:anywhere; }
  .result-caption:empty { display:none; }
  h2 { font-family:var(--serif); font-size:30px; font-weight:400; letter-spacing:-.9px; line-height:1.25; }
  .text-button { border:0; background:none; color:var(--green); font-size:14px; font-weight:500; padding:10px 0 10px 10px; white-space:nowrap; text-decoration:underline; text-underline-offset:4px; }
  .result-card { border-bottom:1px solid var(--line); padding:26px 0 24px; }
  .card-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:14px; }
  .result-card h3 { font-size:20px; font-weight:600; letter-spacing:-.5px; line-height:1.35; }
  .status { display:inline-flex; gap:5px; align-items:center; padding:3px 8px; border-radius:3px; font-size:13px; font-weight:600; line-height:1.5; }
  .status-symbol { flex-shrink:0; width:12px; text-align:center; font-size:14px; }
  .status.allowed,.status.unlisted { background:#e0ead6; color:#31583a; }
  .status.conditional { background:#e1e9e9; color:#34575e; }
  .status.approval { background:#efe1bd; color:#72501b; }
  .status.conflict,.status.unclear { background:#efe1bd; color:#72501b; }
  .status.excluded { background:#f0dcd3; color:#8c3d2d; }
  .card-answer { color:#405246; font-size:16px; line-height:1.7; max-width:70ch; }
  .card-details { margin-top:16px; }
  .card-details summary { width:fit-content; color:var(--green); font-size:14px; font-weight:500; }
  .card-details ul { font-size:15px; color:#405246; padding-left:20px; margin:16px 0; }
  .card-details li+li { margin-top:8px; }
  .source-links { display:flex; flex-wrap:wrap; gap:10px 18px; padding-top:14px; }
  .source-links a { font-size:14px; overflow-wrap:anywhere; }
  .single .result-card { padding:24px 0 28px; }
  .single .result-card h3 { font-family:var(--serif); font-size:34px; font-weight:400; letter-spacing:-1px; }
  .service-rule { border-left:2px solid #b1bea8; padding:6px 0 6px 22px; margin-top:26px; }
  .service-rule-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .service-rule h4 { font-size:16px; font-weight:600; line-height:1.4; }
  .service-rule>p { color:#405246; font-size:15px; max-width:70ch; }
  .empty-state { grid-column:1/-1; padding:28px 0; border-bottom:1px solid var(--line); }
  .empty-state h3 { font-family:var(--serif); font-size:30px; font-weight:400; letter-spacing:-.8px; margin-bottom:12px; }
  .empty-state p { max-width:65ch; color:var(--muted); overflow-wrap:anywhere; }
  .empty-state p+p { margin-top:12px; }
  .item-suggestions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .item-suggestions button { border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--green); padding:11px 15px; text-align:left; font-size:16px; }
  .item-suggestions button:hover { border-color:var(--green); background:var(--panel); }
}

@layer responsive {
  @media(min-width:1400px) { .lookup-layout { gap:88px; } }
  @media(max-width:1100px) { .category-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media(max-width:1000px) {
    .wrap { padding-inline:32px; }
    .site-header::after { inset-inline:32px; }
    .lookup-layout { gap:36px; padding-block:44px; }
    h1 { font-size:56px; letter-spacing:-2.5px; }
    .search-panel { padding:24px; }
    .results-grid { column-gap:32px; }
  }
  @media(max-width:900px) {
    .wrap { padding-inline:22px; }
    .site-header { min-height:102px; }
    .site-header::after { inset-inline:22px; }
    .brand { font-size:36px; letter-spacing:-1.4px; }
    .brand-mark { width:40px; height:40px; }
    .lookup-layout { grid-template-columns:1fr; gap:28px; padding:36px 0 28px; }
    .hero { padding:0; }
    h1 { max-width:14ch; font-size:clamp(42px,10.5vw,62px); letter-spacing:-2px; line-height:1.06; }
    .hero-description { margin-top:16px; font-size:16px; max-width:34ch; }
    .search-panel { padding:22px; }
    .search-row { flex-wrap:wrap; }
    input[type=search] { width:calc(100% - 36px); }
    .search-button { width:100%; }
    .category-browser { padding-top:24px; margin-bottom:28px; }
    .results-grid { grid-template-columns:1fr; }
    .results-heading { gap:14px; }
    h2 { font-size:28px; }
    .text-button { padding-left:0; }
    .result-card,.single .result-card { padding:22px 0; }
    .single .result-card h3 { font-size:30px; }
    .service-rule { padding-left:16px; }
    .site-footer { flex-direction:column; align-items:start; gap:16px; padding-block:20px; }
  }
  @media(max-width:600px) {
    .site-header { flex-wrap:wrap; gap:12px; padding-block:22px 18px; }
    .brand { flex-basis:100%; font-size:clamp(24px,7vw,36px); gap:10px; letter-spacing:-1px; }
    .brand-mark { width:36px; height:36px; }
    .language-switch { margin-left:auto; }
  }
  @media(max-width:520px) {
    .category-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .category-chip:last-child:nth-child(odd) { grid-column:1 / -1; }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
}