/* ============================================================
   OFFCULT · SUPPORT — customer-facing theme
   Monochrome streetwear: paper + ink, sharp edges, grotesque
   display type, editorial uppercase detailing.
   Loaded only by includes/customer_header.php (agent side keeps
   its own style.css untouched).
   ============================================================ */

:root{
    --ink:#0b0b0c;          /* near-black */
    --ink-soft:#1c1c1f;
    --paper:#f4f3f0;        /* warm off-white page */
    --paper-2:#efeee9;
    --card:#ffffff;
    --line:#e4e2dc;         /* warm hairline */
    --line-strong:#0b0b0c;
    --text:#16161a;
    --muted:#6b6a66;
    --muted-2:#9a988f;
    --focus:rgba(11,11,12,.14);
    --radius:4px;
    --radius-sm:2px;
    --shadow:0 1px 2px rgba(17,16,14,.04), 0 18px 40px -24px rgba(17,16,14,.35);
    --maxw:880px;
    --display:"Space Grotesk","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0;
    font-family:var(--body);
    background:var(--paper);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"ss01","cv05";
}
a{ color:inherit; }
::selection{ background:var(--ink); color:#fff; }

/* ---- Top bar ---- */
.tk-top{
    background:var(--ink);
    color:#fff;
    height:64px;
    padding:0 22px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid #000;
}
.tk-brand{
    display:flex; align-items:center; gap:12px;
    text-decoration:none; color:#fff;
}
.tk-brand .wm{
    font-family:var(--display);
    font-weight:700;
    font-size:19px;
    letter-spacing:.34em;
    text-indent:.34em;        /* compensate trailing tracking */
    text-transform:uppercase;
    line-height:1;
}
.tk-brand .tag{
    font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:#bdbcb6;
    padding-left:12px; margin-left:2px;
    border-left:1px solid #3a3a3d;
    line-height:1;
}
.tk-top .meta{ display:flex; align-items:center; gap:16px; }
.tk-top .meta .chip{
    font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:#e9e8e3;
    border:1px solid #34343a; border-radius:999px;
    padding:5px 12px;
}
.tk-top .meta a{
    color:#bdbcb6; text-decoration:none;
    font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    transition:color .15s ease;
}
.tk-top .meta a:hover{ color:#fff; }

/* ---- Page shell ---- */
.tk-wrap{ max-width:var(--maxw); margin:0 auto; padding:40px 18px 84px; }
.tk-wrap.wide{ max-width:1180px; }

/* ---- Eyebrow / section labels ---- */
.tk-eyebrow{
    font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted-2);
    margin:0 0 10px;
}

/* ---- Cards ---- */
.tk-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.tk-card .pad{ padding:26px 28px; }

/* ---- Typography ---- */
.tk-h1{
    font-family:var(--display);
    font-size:clamp(21px, 4.6vw, 27px); font-weight:700; letter-spacing:-.015em; line-height:1.15;
    margin:0 0 6px; color:var(--ink); overflow-wrap:break-word;
}
.tk-h2{
    font-family:var(--display);
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink); margin:0 0 16px;
    display:flex; align-items:center; gap:10px;
}
.tk-h2::after{ content:""; flex:1; height:1px; background:var(--line); }
.tk-sub{ color:var(--muted); font-size:14.5px; margin:0; }

.tk-page-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    margin-bottom:22px;
}

.tk-back{
    display:inline-flex; align-items:center; gap:7px;
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); text-decoration:none; margin-bottom:18px;
    transition:color .15s ease, gap .15s ease;
}
.tk-back:hover{ color:var(--ink); gap:10px; }

/* ---- Forms ---- */
.tk-field{ margin-bottom:18px; }
.tk-label{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
    color:var(--ink); margin-bottom:8px; display:block;
}
.tk-label .opt{ text-transform:none; font-weight:500; letter-spacing:0; color:var(--muted-2); }
.tk-input, .tk-select, .tk-textarea{
    width:100%; font-family:var(--body); font-size:14.5px; color:var(--text);
    background:#fff; border:1px solid #d8d6cf; border-radius:var(--radius-sm);
    padding:12px 14px; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tk-input::placeholder,.tk-textarea::placeholder{ color:#b4b2aa; }
.tk-input:focus,.tk-select:focus,.tk-textarea:focus{
    border-color:var(--ink); box-shadow:0 0 0 3px var(--focus);
}
.tk-textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.tk-select{ -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%230b0b0c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer;
}
.tk-input[type=file]{ padding:10px 12px; font-size:13px; color:var(--muted); cursor:pointer; background:var(--paper); border-style:dashed; }
.tk-input[type=file]::file-selector-button{
    font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    margin-right:14px; padding:8px 14px; cursor:pointer;
    background:var(--ink); color:#fff; border:0; border-radius:var(--radius-sm);
}

.tk-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---- Buttons ---- */
.tk-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:var(--radius-sm);
    padding:13px 22px; cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:background .16s ease, color .16s ease, transform .05s ease;
}
.tk-btn:hover{ background:#fff; color:var(--ink); }
.tk-btn:active{ transform:translateY(1px); }
.tk-btn.ghost{ background:#fff; color:var(--ink); border-color:#d8d6cf; }
.tk-btn.ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tk-btn.sm{ padding:9px 15px; font-size:11px; }
.tk-btn.block{ width:100%; }
/* Alert variant (e.g. "Action needed" dashboard tab) */
.tk-btn.alert{ background:#fff; color:#7a2718; border-color:#e4b9b0; }
.tk-btn.alert:hover{ background:#7a2718; color:#fff; border-color:#7a2718; }
.tk-btn.alert.on{ background:#7a2718; color:#fff; border-color:#7a2718; }
/* Loading state (set by app.js on submit) */
.tk-btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.tk-btn.is-loading::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
    border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation:tk-spin .6s linear infinite; }
.tk-btn.ghost.is-loading::after{ border-color:var(--ink); border-top-color:transparent; }
@keyframes tk-spin{ to{ transform:rotate(360deg); } }

/* ---- Ticket list ---- */
.tk-list{ list-style:none; margin:0; padding:0; }
.tk-row{
    display:flex; align-items:center; gap:16px;
    padding:18px 6px; border-bottom:1px solid var(--line);
    text-decoration:none; color:inherit;
    transition:background .14s ease, padding-left .14s ease;
}
.tk-row:last-child{ border-bottom:0; }
.tk-row:hover{ background:var(--paper); padding-left:14px; padding-right:14px; }
.tk-row .grow{ min-width:0; flex:1; }
.tk-row .subj{
    font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em;
    color:var(--ink); display:block; margin-bottom:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tk-row:hover .subj{ text-decoration:underline; text-underline-offset:3px; }
.tk-row .code{
    font-size:12px; color:var(--muted); letter-spacing:.01em;
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.tk-row .code .mono{ font-weight:600; color:var(--ink); letter-spacing:.04em; }
.tk-row .code .sep{ color:var(--muted-2); }
.tk-row .badges{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tk-row .chev{ color:var(--muted-2); flex-shrink:0; transition:transform .14s ease, color .14s ease; }
.tk-row:hover .chev{ transform:translateX(3px); color:var(--ink); }

/* ---- Badges (mapped from functions.php Bootstrap-ish classes) ---- */
.tk-badge{
    display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:5px 10px; border-radius:999px; border:1px solid transparent; line-height:1; white-space:nowrap;
}
.tk-badge.bg-primary{ background:var(--ink); color:#fff; border-color:var(--ink); }       /* open */
.tk-badge.bg-warning{ background:#fbf1d9; color:#7a5b12; border-color:#ebd9a8; }            /* in progress */
.tk-badge.bg-success{ background:#e3efe6; color:#2c5638; border-color:#cbe0d1; }            /* resolved */
.tk-badge.bg-secondary{ background:#eceae4; color:#6b6a66; border-color:#ddd9d0; }          /* closed */
.tk-badge.bg-danger{ background:#f6e2de; color:#7e2a1b; border-color:#eccbc2; }             /* high */
.tk-badge.bg-info{ background:#e8ebee; color:#3a4654; border-color:#d6dce2; }               /* medium */
.tk-badge.bg-light{ background:#f4f3f0; color:#6b6a66; border-color:#e0ddd6; }              /* low */

/* "Support replied" marker — latest activity is from an agent (customer list) */
.tk-new{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:#fff; background:var(--ink); border-radius:999px; padding:5px 10px; white-space:nowrap; }
.tk-new::before{ content:""; width:6px; height:6px; border-radius:50%; background:#5fb98a; }

/* ---- Meta grid ---- */
.tk-meta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:18px; }
.tk-meta-grid .k{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); margin-bottom:4px; }
.tk-meta-grid .v{ font-size:14.5px; font-weight:600; color:var(--ink); font-family:var(--display); }

.tk-divider{ border:0; border-top:1px solid var(--line); margin:20px 0; }

/* ---- Conversation thread ---- */
.tk-thread{ display:flex; flex-direction:column; gap:18px; }
.tk-msg{ display:flex; gap:14px; }
.tk-msg .avatar{
    flex-shrink:0; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em;
    background:var(--paper-2); color:var(--ink); border:1px solid var(--line);
}
.tk-msg.agent .avatar{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tk-msg .bubble{ flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:#fff; }
.tk-msg.agent .bubble{ background:var(--paper); border-color:var(--line); }
.tk-msg .who{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }
.tk-msg .who .name{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.tk-msg .who .name .org{ color:var(--muted-2); font-weight:600; margin-left:6px; }
.tk-msg .who .t{ font-size:11.5px; color:var(--muted-2); letter-spacing:.02em; white-space:nowrap; }
.tk-msg .body{ white-space:pre-wrap; font-size:14.5px; color:#26262a; line-height:1.6; }

.tk-att{
    display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:7px 11px; margin:8px 8px 0 0; text-decoration:none; color:var(--ink);
    transition:border-color .14s ease, background .14s ease;
}
.tk-att:hover{ border-color:var(--ink); background:var(--paper); }

/* Attachment row + inline image thumbnails */
.tk-atts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.tk-atts .tk-att{ margin:0; }
.tk-att-img{ display:block; line-height:0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .14s ease, transform .14s ease; }
.tk-att-img img{ width:88px; height:88px; object-fit:cover; display:block; background:var(--paper-2); }
.tk-att-img:hover{ border-color:var(--ink); transform:translateY(-1px); }

/* Live previews of files chosen for upload (added by app.js) */
.tk-filepreview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tk-filepreview:empty{ margin-top:0; }
.tk-fp-item{ display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; max-width:100%; }
.tk-fp-thumb{ width:34px; height:34px; object-fit:cover; border-radius:2px; flex-shrink:0; display:block; }
.tk-fp-doc{ width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; border-radius:2px; font-size:9px; font-weight:700; letter-spacing:.04em; }
.tk-fp-name{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* ---- Flash ---- */
.tk-flash{
    border-radius:var(--radius-sm); padding:13px 16px; font-size:13.5px; margin-bottom:22px;
    border:1px solid transparent; display:flex; gap:10px; align-items:flex-start;
}
.tk-flash::before{ font-weight:700; }
.tk-flash.info{ background:#eef1f6; color:#27384f; border-color:#dbe1ea; }
.tk-flash.success{ background:#e6f1e9; color:#22512f; border-color:#cfe3d5; }
.tk-flash.warning{ background:#fbf1d9; color:#6e520f; border-color:#ecdba9; }
.tk-flash.danger{ background:#f7e3df; color:#7a2718; border-color:#eccbc2; }
.tk-flash-x{ margin-left:auto; flex-shrink:0; background:none; border:0; cursor:pointer; font-size:19px; line-height:1; color:inherit; opacity:.45; padding:0 2px; }
.tk-flash-x:hover{ opacity:.9; }

/* ---- Empty state ---- */
.tk-empty{ text-align:center; padding:44px 20px; }
.tk-empty .mark{
    font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.3em; text-indent:.3em;
    text-transform:uppercase; color:var(--ink);
    display:inline-block; padding:14px 18px; border:1px solid var(--line); border-radius:50%;
    width:84px; height:84px; line-height:56px; margin-bottom:20px;
}
.tk-empty h3{ font-family:var(--display); font-size:18px; margin:0 0 8px; color:var(--ink); }
.tk-empty p{ color:var(--muted); margin:0 0 20px; font-size:14px; }

.tk-muted{ color:var(--muted); font-size:13.5px; }

/* ---- Login hero ---- */
.tk-hero{ text-align:center; margin-bottom:26px; }
.tk-hero .lockup{
    font-family:var(--display); font-weight:700; font-size:clamp(26px, 8vw, 34px); letter-spacing:.36em; text-indent:.36em;
    text-transform:uppercase; color:var(--ink); margin:0;
}
.tk-hero .rule{ width:40px; height:2px; background:var(--ink); margin:16px auto 14px; }
.tk-hero .tagline{ color:var(--muted); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin:0; }

.tk-trust{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:18px; color:var(--muted-2); font-size:12px;
}
.tk-trust svg{ flex-shrink:0; }

/* ============================================================
   ADMIN / AGENT components
   ============================================================ */

/* Inline code (setup hints) */
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:1px 5px; }

/* Dashboard quick-stat filter chips live in the page head and reuse .tk-btn.sm[.ghost] */
.tk-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Filter bar */
.tk-filterbar{ display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.tk-filterbar > div{ flex:1 1 150px; min-width:140px; }
.tk-filterbar > div.submit{ flex:0 0 auto; min-width:0; }
.tk-filterbar .tk-label{ margin-bottom:6px; }

/* Data table */
.tk-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tk-table{ width:100%; border-collapse:collapse; min-width:680px; }
table.tk-table th, table.tk-table td{ padding:13px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tk-table th{
    font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted-2); background:var(--paper); border-bottom:1px solid var(--ink);
}
table.tk-table tbody tr{ transition:background .12s ease; }
table.tk-table tbody tr:hover td{ background:var(--paper); }
table.tk-table tbody tr:last-child td{ border-bottom:0; }
.tk-table .t-subj{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.tk-table .t-subj:hover{ text-decoration:underline; text-underline-offset:3px; }
.tk-table .t-code{ font-size:11.5px; color:var(--muted-2); letter-spacing:.04em; margin-top:2px; }
.tk-table .t-num{ font-variant-numeric:tabular-nums; color:var(--muted); }
.tk-table .t-nowrap{ white-space:nowrap; }
.tk-table .t-empty{ text-align:center; color:var(--muted-2); padding:34px 14px; }
.tk-flag{ display:inline-block; margin-left:6px; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:#fbf1d9; color:#7a5b12; border:1px solid #ebd9a8; border-radius:999px; padding:3px 7px; vertical-align:middle; }
.tk-flag.alert{ margin-left:0; background:#f7e3df; color:#7a2718; border-color:#e4b9b0; }

/* Stale rows ("action needed") get a subtle tint so they stand out at a glance. */
table.tk-table tr.is-alert td{ background:#fbefec; }
table.tk-table tr.is-alert:hover td{ background:#f6e3de; }

/* Two-column ticket layout (conversation + manage panel) */
.tk-admin-grid{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media (max-width:880px){ .tk-admin-grid{ grid-template-columns:1fr; } }

/* Reply-template picker (on the agent reply form) */
.tk-tpl-pick{ display:flex; gap:8px; align-items:stretch; }
.tk-tpl-pick .tk-select{ flex:1; }
.tk-tpl-pick .tk-btn{ flex:0 0 auto; }

/* Templates manager list */
.tk-tpl-list{ display:flex; flex-direction:column; gap:0; }
.tk-tpl-item{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:18px 4px; border-bottom:1px solid var(--line); }
.tk-tpl-item:last-child{ border-bottom:0; }
.tk-tpl-item .info{ min-width:0; }
.tk-tpl-item .ttl{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); margin:0 0 4px; }
.tk-tpl-item .prev{ color:var(--muted); font-size:13px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tk-tpl-item .acts{ display:flex; gap:8px; flex-shrink:0; }
.tk-tpl-item .acts form{ margin:0; }
@media (max-width:560px){
    .tk-tpl-item{ flex-direction:column; gap:10px; }
    .tk-tpl-item .acts{ width:100%; }
    .tk-tpl-item .acts .tk-btn{ flex:1; }
}

/* Footer ---- */
.tk-foot{
    max-width:var(--maxw); margin:0 auto; padding:30px 18px 50px;
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    border-top:1px solid var(--line);
}
.tk-foot .fw{ font-family:var(--display); font-weight:700; letter-spacing:.26em; text-indent:.26em; text-transform:uppercase; font-size:12px; color:var(--ink); }
.tk-foot .fnote{ color:var(--muted-2); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* ============================================================
   RESPONSIVE  (mobile-up overrides; smaller screens win via order)
   ============================================================ */

/* Tablets / small laptops — tighten the shell */
@media (max-width:768px){
    .tk-wrap{ padding:32px 16px 64px; }
    .tk-card .pad{ padding:24px 24px; }
}

/* Phones */
@media (max-width:600px){
    /* Top bar: hide the sub-tag, shrink wordmark + chip so nothing overflows */
    .tk-top{ height:56px; padding:0 14px; }
    .tk-brand{ gap:8px; }
    .tk-brand .wm{ font-size:16px; letter-spacing:.2em; text-indent:.2em; }
    .tk-brand .tag{ display:none; }
    .tk-top .meta{ gap:10px; }
    .tk-top .meta .chip{ font-size:10px; padding:4px 9px; letter-spacing:.05em; }
    .tk-top .meta a{ font-size:10px; letter-spacing:.1em; }
    /* Admin: drop the agent-name chip on phones so the Templates nav link fits */
    .tk-admin .tk-top .meta .chip{ display:none; }

    .tk-wrap{ padding:24px 14px 56px; }
    .tk-card .pad{ padding:20px 17px; }

    /* 16px form text stops iOS Safari from auto-zooming on focus */
    .tk-input, .tk-select, .tk-textarea{ font-size:16px; }
    .tk-textarea{ min-height:120px; }

    /* Page header stacks; CTA goes full-width */
    .tk-page-head{ flex-direction:column; align-items:stretch; gap:14px; }
    .tk-page-head .tk-btn{ width:100%; }

    /* Hero: relax the heavy tracking so the lockup never overflows */
    .tk-hero{ margin-bottom:22px; }
    .tk-hero .lockup{ letter-spacing:.22em; text-indent:.22em; }

    /* Two-up form fields stack */
    .tk-grid-2{ grid-template-columns:1fr; gap:0; }

    /* List rows: tighter; badges + meta reflow */
    .tk-row{ flex-wrap:wrap; gap:8px 10px; padding:16px 4px; }
    .tk-row:hover{ padding-left:8px; padding-right:8px; }
    .tk-row .subj{ font-size:15px; white-space:normal; }
    .tk-row .chev{ display:none; }
    .tk-row .badges{ width:100%; }

    /* Conversation: smaller avatar, stacked meta line in narrow bubbles */
    .tk-msg{ gap:11px; }
    .tk-msg .avatar{ width:32px; height:32px; font-size:11px; }
    .tk-msg .bubble{ padding:13px 14px; }
    .tk-msg .who{ flex-direction:column; align-items:flex-start; gap:2px; }
    .tk-msg .who .t{ font-size:11px; }

    /* Meta grid: two columns instead of squeezing three */
    .tk-meta-grid{ grid-template-columns:1fr 1fr; gap:16px; }

    /* Filter bar: each control on its own row, Filter button full-width */
    .tk-filterbar{ gap:12px; }
    .tk-filterbar > div,
    .tk-filterbar > div.submit{ flex:1 1 100%; }
    .tk-filterbar > div.submit .tk-btn{ width:100%; }

    /* Footer stacks */
    .tk-foot{ flex-direction:column; align-items:flex-start; gap:8px; padding:26px 14px 44px; }
}

/* Very small phones */
@media (max-width:380px){
    .tk-brand .wm{ font-size:15px; letter-spacing:.16em; text-indent:.16em; }
    .tk-top .meta .chip{ font-size:9.5px; padding:4px 8px; }
    .tk-card .pad{ padding:18px 15px; }
    .tk-hero .lockup{ letter-spacing:.16em; text-indent:.16em; }
    .tk-meta-grid{ grid-template-columns:1fr; }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
    .tk-btn.is-loading::after{ animation:none !important; }
}