/* 2026-11-03 | Cxder | Size the shared transparent logo for desktop and mobile app headers. */
/* File: style.css | Purpose: Coastal clip naming interface. 2026-11-03 | Cxder | Use local IBM Plex and light/dark tokens. */
:root{--bg:#F8FAF7;--panel:#EEEDE5;--line:#ced9d3;--muted:#607372;--lime:#187F87;--text:#173F52;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;font-size:16px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1280px)/2));gap:16px}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px;font-family:'IBM Plex Sans',sans-serif;font-weight:700;letter-spacing:2px}.logo{display:block;width:64px;height:64px;object-fit:contain;flex-shrink:0;background:transparent}.stage{font:13px monospace;letter-spacing:2px;color:var(--muted)}.stage span{margin:0 10px;color:var(--lime)}main{max-width:1280px;margin:auto;padding:42px 32px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;gap:20px}.eyebrow{color:var(--lime);font-size:12px;letter-spacing:2px;margin:0 0 12px}h1{font-family:'IBM Plex Sans',sans-serif;font-size:44px;letter-spacing:-2px;margin:0 0 10px}.intro p:last-child{margin:0;color:var(--muted)}button,input,select{font:inherit}button{cursor:pointer;border-radius:8px;transition:background .15s}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.secondary{padding:12px 16px;background:transparent;color:var(--text);border:1px solid var(--line);font-size:14px}.secondary:hover{background:var(--panel)}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start}.editor,.result,.reference{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:28px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-family:'IBM Plex Sans',sans-serif;font-size:18px;font-weight:600;margin:0}h2>span{font:13px monospace;color:var(--lime);margin-right:10px}.muted{font-size:12px;color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:28px}label{font-size:14px;font-weight:500;display:block}input,select{width:100%;margin-top:9px;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:12px;font-size:14px;min-width:0}input:focus,select:focus{outline:2px solid var(--lime);outline-offset:1px}input::placeholder{color:var(--muted)}small{font-size:12px;font-weight:400;color:var(--muted);display:block;margin-top:7px}.wide{grid-column:1/-1}.flow-heading{border-top:1px solid var(--line);padding-top:28px;margin-top:28px}.helper{color:var(--muted);font-size:14px;line-height:1.6;margin:14px 0 20px}.action{display:grid;grid-template-columns:28px 115px minmax(0,1fr) 32px;gap:10px;align-items:center}.action input,.action select{margin:0}.number{font:12px monospace;color:var(--muted)}.remove{border:0;background:transparent;color:var(--muted);font-size:22px;padding:0;height:40px}.remove:hover{color:var(--muted)}.connector{padding:10px 0 10px 37px;display:flex;gap:5px;align-items:center}.connector button{font-size:12px;border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 10px}.connector button.selected{background:var(--panel);color:var(--lime);border-color:var(--line)}.connector:before{content:'';width:1px;height:18px;background:var(--line);margin-right:15px}.add{width:100%;background:transparent;color:var(--lime);border:1px dashed var(--line);margin-top:18px;padding:12px;font-size:14px}.add:hover{background:var(--panel)}.legend{display:flex;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;flex-wrap:wrap}.legend b{color:var(--text);margin-right:5px}aside{display:grid;gap:20px}.result{border-top:3px solid var(--lime)}.live{font:11px monospace;color:var(--lime);letter-spacing:2px}.output-label{font-size:11px;letter-spacing:1.6px;color:var(--muted);margin:26px 0 13px}.filename{font:16px/1.8 'IBM Plex Sans',monospace;overflow-wrap:anywhere;background:var(--panel);padding:18px;border:1px solid var(--line);border-radius:8px;color:var(--lime);min-height:126px}.status{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 18px;min-height:20px}.status.error{color:var(--muted)}.primary{width:100%;border:0;background:var(--lime);color:var(--panel);font-weight:700;padding:15px 18px;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:var(--text)}.primary:disabled{opacity:.4;cursor:not-allowed}.meaning{border-top:1px solid var(--line);margin-top:24px}.meaning .output-label{margin-top:20px}#story{font-size:14px;line-height:1.8;color:var(--text)}.reference{background:transparent;padding:24px 28px}h3{font-size:15px;margin:0 0 18px}.format{font:13px/1.8 monospace;color:var(--muted)}.format em{font-style:normal;color:var(--lime)}.operators{border-top:1px solid var(--line);margin-top:20px;padding-top:10px}.operators p{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12px}.operators b{font:26px monospace;color:var(--lime);width:20px}.operators strong{display:block;font-size:14px;color:var(--text);margin-bottom:4px}.note{font-size:12px;line-height:1.7;color:var(--muted)}.reference a{color:var(--text);font-size:12px;text-underline-offset:4px}footer{display:flex;justify-content:space-between;margin-top:42px;padding:23px 0;border-top:1px solid var(--line);color:var(--muted);font:11px monospace;letter-spacing:1px;gap:20px}@media(max-width:900px){main{padding:30px 20px 0}.workspace{grid-template-columns:1fr 1fr;gap:16px}.editor,.result,.reference{padding:20px}.fields{grid-template-columns:1fr}.wide{grid-column:auto}.action{grid-template-columns:20px 82px minmax(0,1fr) 24px;gap:6px}.action input,.action select{padding:10px 7px}.intro h1{font-size:36px}.muted{display:none}}@media(max-width:680px){.logo{width:56px;height:56px}header{height:72px;padding:0 20px}.stage{font-size:11px;letter-spacing:0}.brand{font-size:13px}.workspace{grid-template-columns:1fr}.intro{align-items:flex-start;flex-direction:column;margin-bottom:24px}.fields{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}.intro p:last-child{font-size:14px}footer{flex-direction:column;font-size:10px}.eyebrow{font-size:10px}.action{grid-template-columns:22px 90px minmax(0,1fr) 26px}.legend{gap:16px}}@media(max-width:380px){.fields{grid-template-columns:1fr}.wide{grid-column:auto}.stage{display:none}}
[hidden]{display:none!important}.action{grid-template-columns:24px minmax(0,.8fr) minmax(0,1.4fr) 26px;align-items:start}.action .number{padding-top:38px}.action .remove{margin-top:25px}.action select{margin-top:9px}.action small{line-height:1.55}.connector{padding:16px 0 16px 34px;display:grid;grid-template-columns:auto minmax(110px,150px);gap:8px 12px;max-width:100%;font-size:14px}.connector:before{display:none}.connector select{margin:0;padding:8px}.connector small{grid-column:1/-1;margin:0}.stack-field{margin-top:22px}.fields small{line-height:1.55}.muted{font-size:14px}.legend{font-size:14px}.helper{margin-bottom:20px}@media(max-width:900px){.workspace{grid-template-columns:1fr}.fields{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}.action{grid-template-columns:24px minmax(0,.8fr) minmax(0,1.4fr) 26px}.muted{display:inline}}@media(max-width:480px){.fields{grid-template-columns:1fr}.wide{grid-column:auto}.action{grid-template-columns:20px minmax(0,1fr) 24px}.action label:first-of-type{grid-column:2}.action label:last-of-type{grid-column:2;grid-row:2}.action .remove{grid-column:3;grid-row:1}.action small{font-size:13px}.intro h1{font-size:34px}.section-head{flex-wrap:wrap}}
.result-summary{margin:0 0 24px;padding-top:0}.result-summary .helper{margin:0 0 16px;font-size:14px}.summary-row{display:grid;gap:5px;margin:0 0 16px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}.summary-label{color:var(--muted);font:12px/1.5 monospace;letter-spacing:.5px}.summary-row mark{background:var(--panel);color:var(--lime);border-radius:4px;padding:2px 5px;font-family:monospace}.result-summary .output-label{font-size:12px}
.included-format{margin-top:24px;border-top:1px solid var(--line);padding-bottom:20px}.included-format>.output-label{font-size:12px;margin-top:20px}.format-map{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 4px;font:13px/1.5 monospace}.format-field{display:inline-flex;flex-direction:column;max-width:100%;color:var(--muted);padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.format-field.included{color:var(--lime);background:var(--panel);border-color:var(--line)}.format-field small{color:inherit;font:12px/1.5 monospace;max-width:100%;overflow-wrap:anywhere;margin-top:3px}.format-separator{color:var(--muted);padding-top:7px}.included-format>small{margin-top:12px;line-height:1.5}.result-summary{margin:0;padding-top:0}

.add:disabled{opacity:.5;cursor:not-allowed}.add:disabled:hover{background:transparent}
/* Readable code presentation. All separators remain literal in copied output. */
:root{--hanzo:var(--muted);--team:var(--text);--enemy:var(--muted)}
.filename{font:500 15px/2.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:0;padding:18px 16px;color:var(--text);line-break:auto}.filename-part{border-radius:5px;padding:5px 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.code-recording{background:var(--panel);color:var(--text)}.code-moment{background:var(--panel);color:var(--text)}.code-body{background:var(--panel);color:var(--text)}.code-context{background:var(--panel);color:var(--muted)}.code-target{background:var(--panel);color:var(--text)}.code-perf{background:var(--panel);color:var(--text)}.code-flow{padding:0;background:none}.code-separator{color:var(--muted);padding:0 3px}.flow-token{border-radius:5px;padding:5px 7px;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-decoration-break:clone;-webkit-box-decoration-break:clone}.actor-hz{color:var(--hanzo);background:var(--panel)}.actor-tm{color:var(--team);background:var(--panel)}.actor-en{color:var(--enemy);background:var(--panel)}.code-operator{color:var(--text);font-weight:700;display:inline-block;padding:0 7px;font-family:monospace}.format-map{gap:10px 5px;line-height:1.6}.format-field{padding:9px 10px;border-radius:8px;color:var(--muted)}.format-field>span{font-size:12px;letter-spacing:.3px}.format-field.included{background:var(--panel);border-color:var(--line)}.format-field small{margin-top:6px;font-size:14px;font-weight:600;line-height:1.8}.format-field:has(.format-flow){width:100%}.format-flow{display:flex;align-items:center;flex-wrap:wrap;gap:5px 0}.format-flow .flow-token{padding:4px 7px;font-size:14px}.format-separator{padding-top:12px;color:var(--line)}.action{padding:16px 12px;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;background:var(--panel);gap:12px}.action[data-actor="HZ"]{border-left-color:var(--hanzo)}.action[data-actor="TM"]{border-left-color:var(--team)}.action[data-actor="EN"]{border-left-color:var(--enemy)}.action .number{font-size:14px;color:var(--muted)}.action select{font-size:14px;line-height:1.45}.connector{padding:14px 0 14px 36px}#story{font-size:15px;line-height:1.9}.legend span:nth-child(1) b{color:var(--hanzo)}.legend span:nth-child(2) b{color:var(--team)}.legend span:nth-child(3) b{color:var(--enemy)}select{line-height:1.5}small{line-height:1.6}@media(max-width:480px){.filename{font-size:14px;padding:14px 10px}.action{padding:12px 8px;gap:9px}.format-field small{font-size:13px}.format-flow .flow-token{font-size:13px}}

/* 2026-11-03 | Cxder | Apply x303 colors and light/dark modes. */
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/sans.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/mono.woff2') format('woff2');font-weight:400;font-display:swap}
:root[data-theme=dark]{--bg:#0b141b;--panel:#13232d;--line:#3b5662;--muted:#afc4c9;--lime:#8ddbd0;--text:#edf5f4;--surface-raised:#1b303b;--body-text:#c6d7dc;--control-border:#63828e;--accent-hover:#b1eee4;--accent-ink:#09232a;--danger:#ffc2c5;--danger-bg:#38222b;color-scheme:dark}
body{color:var(--text)}.brand{color:var(--text);font-weight:500;letter-spacing:1px}h1{font-weight:500}main{max-width:1120px}.editor,.result,.reference{border-radius:6px}.primary{background:var(--lime);color:var(--bg)}.filename{font-family:'IBM Plex Mono',monospace}.theme-toggle{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px 12px;font-size:13px}.app-controls{display:flex;gap:16px;align-items:center}button:focus-visible,a:focus-visible{outline-offset:1px}
@media(max-width:650px){header{flex-wrap:wrap;height:auto;padding:16px;gap:12px}.stage{display:none}main{padding:24px 16px 0}}

/* 2026-11-03 | Cxder | Consistent control heights, label rhythm and inset dropdown arrows. */
label{line-height:20px}
input,select{height:44px;padding:10px 12px;margin-top:8px;line-height:22px;border-radius:6px}
select,.action select,.connector select{appearance:none;-webkit-appearance:none;padding:10px 36px 10px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23187F87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2379cec5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
label small{display:block;margin-top:8px;line-height:1.5}
.fields{align-items:start;gap:20px 16px}
.action select{margin-top:8px}
.action .remove{margin-top:28px;width:28px;height:44px;display:flex;align-items:center;justify-content:center}
.action .number{margin-top:28px;line-height:44px}
.connector{align-items:center;gap:8px 12px}
.connector select{margin:0}
.secondary,.primary,.add,.theme-toggle{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:20px;padding:10px 16px}
.primary{justify-content:space-between}
.primary:hover:not(:disabled){background:var(--lime);filter:brightness(.92)}
.section-head{align-items:center;gap:16px}
.section-head h2{margin:0;display:flex;align-items:center;gap:8px}
@media(forced-colors:active){select,.action select,.connector select{appearance:auto;background-image:none}}

/* 2026-11-03 | Cxder | Reference action and home footer navigation. */
.reference-example{display:flex;margin-top:16px;width:100%}
footer{flex-wrap:wrap;gap:16px}
footer .back-to-space{color:var(--lime);text-decoration:none;font-size:13px}
footer .back-to-space:hover{text-decoration:underline}

/* 2026-11-03 | Cxder | Dark logo palette: brighter teal and pale seafoam, retaining the transparent artwork. */
@media screen{[data-theme=dark] img.logo{filter:brightness(1.8) saturate(.65)}}

/* 2026-11-03 | Cxder | Match the full app interface to the midnight and seafoam site palette. */
@media screen {
  :root[data-theme=dark] { accent-color:var(--lime) }
  [data-theme=dark] :is(input,select) { background-color:var(--bg);border-color:var(--control-border);color:var(--body-text) }
  [data-theme=dark] input::placeholder { color:var(--muted);opacity:1 }
  [data-theme=dark] .filename { background:var(--bg);color:var(--lime);border-color:var(--control-border) }
  [data-theme=dark] .reference { background:var(--panel) }
  [data-theme=dark] :is(.secondary,.theme-toggle) { border-color:var(--control-border);color:var(--text) }
  [data-theme=dark] :is(.secondary,.theme-toggle):hover { background:var(--surface-raised);border-color:var(--lime) }
  [data-theme=dark] .primary { background:var(--lime);color:var(--accent-ink) }
  [data-theme=dark] .primary:hover:not(:disabled) { background:var(--accent-hover);filter:none }
  [data-theme=dark] .add { border-color:var(--control-border) }
  [data-theme=dark] .add:hover { background:var(--surface-raised) }
  [data-theme=dark] :is(.status.error,.remove:hover) { color:var(--danger) }
  [data-theme=dark] .action { background:var(--surface-raised) }
  [data-theme=dark] .connector button.selected { background:var(--surface-raised);border-color:var(--lime) }
  [data-theme=dark] select option { background:var(--bg);color:var(--text) }
}