/* iamlookingfor.work — components: publish bar, customize toolbar, content editor, auth modal, settings, public page
   Linked in index.html in cascade order: base.css -> components.css -> templates.css.
   Keep that order; source order resolves equal-specificity ties. */

  /* ---- publish bar ---- */
  .publish{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:14px}
  .publish .pre{color:var(--muted);font-size:14px}
  .publish input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;min-width:130px;flex:1}
  .publish input:focus{outline:2px solid var(--accent);border-color:transparent}
  .publish .msg{font-size:13px;font-weight:600}
  .publish .msg.ok{color:#0c7a37}.publish .msg.bad{color:#b42323}
  .publish .msg a{color:var(--accent)}
  .publish input.locked{background:#f3f3f6;color:var(--muted);cursor:not-allowed}
  .hstatus{font-size:13px;font-weight:600;color:var(--muted)}
  .hstatus.ok{color:#0c7a37}.hstatus.bad{color:#b42323}
  .livepanel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#eafff1;border:1px solid #bff0cf;border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;font-size:14px}
  .livepanel .lp-label{color:#0c7a37;font-weight:600}
  .livepanel .lp-url{font-family:ui-monospace,Menlo,monospace;color:var(--ink);text-decoration:none;background:#fff;border:1px solid #bff0cf;padding:6px 10px;border-radius:8px}

  /* ---- page screen: customize toolbar ---- */
  .toolbar{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px}
  .trow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:9px 0}
  .trow > .lab{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;width:116px;flex:none}
  .trow > select, .trow > input.tinput{flex:1 1 auto;min-width:0}
  #swatches{display:inline-flex;gap:8px;align-items:center;vertical-align:middle;flex-wrap:wrap}
  .swatch{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
  .swatch.on{box-shadow:0 0 0 2px var(--ink)}
  select,.tinput{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
  .tinput{flex:1;min-width:200px}
  .filebtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:14px;font-weight:600}
  .filebtn.upload-cta{display:flex;justify-content:center;width:100%;padding:16px;border:2px dashed var(--line);border-radius:12px;font-size:15px;color:var(--ink);background:var(--soft);cursor:pointer}
  .filebtn.upload-cta:hover{border-color:var(--accent);color:var(--accent)}
  .or-line{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:13px;margin:14px 0}
  .or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
  .or-line span{padding:0 12px}
  .filebtn input{display:none}
  .photo-prev{width:30px;height:30px;border-radius:7px;object-fit:cover;border:1px solid var(--line)}
  .linkbtn.del{color:#b42323;font-size:13px}
  .toolbar .hint{font-size:12px;color:var(--muted);margin-top:8px;border-top:1px solid var(--line);padding-top:9px}
  .tsep{height:1px;background:var(--line);margin:13px 0}
  /* content editor */
  .ce-block{margin:0 0 14px}
  .ce-lab{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:6px}
  .ce-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .ce-block input.tinput,.ce-block textarea.tinput{width:100%;min-width:0;flex:none}
  .ce-block textarea.tinput,.ce-item textarea.tinput{min-height:96px;resize:vertical;line-height:1.45}
  .ce-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px;position:relative}
  .cs-add{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .cs-type{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:800}
  .cs-row{border:1px dashed var(--line);border-radius:9px;padding:9px;margin-bottom:2px;display:flex;flex-direction:column;gap:6px;position:relative}
  .ce-item-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px}
  .ce-item-actions button{background:#fff;border:1px solid var(--line);border-radius:6px;width:24px;height:24px;font-size:13px;cursor:pointer;color:var(--muted)}
  .ce-item-actions button[disabled]{opacity:.35;cursor:default}
  .ce-item-actions button.rm{color:#b42323;border-color:#ffd5d5}
  .ce-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
  .ce-row .rm{background:#fff;border:1px solid #ffd5d5;color:#b42323;border-radius:6px;width:28px;height:28px;flex:none;cursor:pointer}
  .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:7px;background:#fff}
  .chip{display:inline-flex;align-items:center;gap:5px;background:#f1f0ff;color:#4a3fd1;border-radius:999px;padding:3px 6px 3px 10px;font-size:13px;font-weight:600}
  .chip button{background:#d9d6ff;color:#4a3fd1;border:0;border-radius:50%;width:16px;height:16px;line-height:1;cursor:pointer;font-size:12px}
  .chip-input{border:0;outline:none;flex:1;min-width:90px;font:inherit;font-size:14px;padding:4px}
  .ce-toggles{display:flex;flex-wrap:wrap;gap:14px}
  .ce-toggle{display:flex;align-items:center;gap:6px;font-size:14px}
  .ce-row input.tinput{flex:1 1 0;min-width:0;width:auto}
  .assist{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-height:0;margin-top:0;opacity:0;overflow:hidden;pointer-events:none;transition:opacity .15s ease,max-height .15s ease,margin-top .15s ease}
  .ce-block:hover>.assist,.ce-block:focus-within>.assist,.ce-item:hover .assist,.ce-item:focus-within .assist,.assist.busy,.assist.err{max-height:80px;margin-top:6px;opacity:1;pointer-events:auto}
  .assist-lab{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
  .assist-actions{display:inline-flex;flex-wrap:wrap;gap:5px}
  .assist-busy{display:none;align-items:center;gap:6px;color:var(--accent);font-size:12px;font-weight:700}
  .assist.busy .assist-busy{display:inline-flex}
  .assist.busy .assist-actions,.assist.busy .assist-ur{display:none}
  .assist-err{display:none;color:#b42323;font-size:12px;font-weight:600}
  .assist.err .assist-err{display:inline-flex;align-items:center;margin-left:6px}
  .mini-spin{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--accent) 28%,transparent);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
  .ai-busy{animation:aipulse 1.1s ease-in-out infinite}
  @keyframes aipulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)}}
  .ai-flash{animation:aiflash .9s ease-out}
  @keyframes aiflash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 9%,#fff)}100%{box-shadow:0 0 0 0 transparent;background:#fff}}
  .aibtn{background:#f7f6ff;border:1px solid #e0ddff;color:#4a3fd1;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
  .aibtn:hover{background:#efecff}
  .aibtn:disabled{opacity:.4;cursor:default}
  .assist-ur{display:inline-flex;gap:4px;margin-left:auto;padding-left:8px;border-left:1px solid var(--line)}
  .aibtn.ur{background:#fff;border-color:var(--line);color:var(--muted);padding:3px 8px;font-size:13px;line-height:1}
  .aibtn.ur:not(:disabled):hover{background:#f3f2f7;color:#333}
  .ai-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);background:#1b1b22;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:9999}
  .ai-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* preview-side toggle (layout preference) */
  .editor-opts{display:flex;justify-content:flex-end;margin:0 0 10px}
  .editor-opts .side-toggle{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
  .editor-opts .side-toggle:hover{color:var(--ink);border-color:var(--accent)}
  /* side-by-side editor + preview on wide screens */
  @media(min-width:1000px){
    .editor-wrap{max-width:1280px}
    .editor-grid{display:flex;gap:28px;align-items:flex-start}
    .editor-grid > .toolbar{flex:0 0 500px;margin-bottom:0}
    .editor-grid > .stage{flex:1;min-width:0;position:sticky;top:16px}
    .editor-grid.prev-left{flex-direction:row-reverse}
  }
  /* below the side-by-side breakpoint there is no left/right — hide the toggle */
  @media(max-width:999px){ .editor-opts{display:none} }

  /* the rendered template lives in #stage; bg adapts per template */
  .stage{border-radius:18px;padding:34px 22px;transition:background .25s}
  .bg-editorial{background:#f4f1ea}.bg-midnight{background:#0b0c10}.bg-warm{background:#fbf3ec}.bg-brutal{background:#f0f0f3}.bg-minimal{background:#f3f4f6}.bg-avant{background:#e6e2d8}
  [contenteditable]:hover{outline:2px dashed color-mix(in srgb,var(--accent) 45%, transparent);outline-offset:3px;border-radius:5px}
  [contenteditable]:focus{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

  /* ---- auth modal ---- */
  .overlay{display:none;position:fixed;inset:0;background:rgba(20,18,40,.45);z-index:50;align-items:center;justify-content:center;padding:20px}
  .overlay.show{display:flex}
  .modal{background:#fff;border-radius:18px;width:100%;max-width:380px;padding:26px;box-shadow:0 30px 80px rgba(20,18,40,.3)}
  .modal h3{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}
  .modal p.tiny{margin:0 0 18px}
  .modal label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
  .modal input:not([type="checkbox"]){width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px}
  .modal input:not([type="checkbox"]):focus{outline:2px solid var(--accent);border-color:transparent}
  .modal select,.modal textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
  .modal textarea{resize:vertical;min-height:64px;line-height:1.45}
  .modal select:focus,.modal textarea:focus{outline:2px solid var(--accent);border-color:transparent}
  #authConsent input[type="checkbox"]{width:16px;height:16px;flex:none}
  .modal .err{margin-top:12px}
  .modal .go{width:100%;margin-top:18px;justify-content:center}
  .modal .toggle{text-align:center;margin-top:14px;font-size:14px;color:var(--muted)}
  .modal .toggle button{color:var(--accent);font-weight:600;background:none;padding:0}
  .modal .x{float:right;background:none;color:var(--muted);font-size:20px;line-height:1;padding:0}

  /* ---- settings ---- */
  .settings h1{font-size:28px;letter-spacing:-.02em;margin:14px 0 18px}
  .settings .card{margin-bottom:16px}
  .settings h2{font-size:18px;margin:0 0 4px}
  .settings label{display:block;font-size:13px;font-weight:600;margin:10px 0 5px}
  .settings input{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px}
  .settings input:focus{outline:2px solid var(--accent);border-color:transparent}
  .settings .msg{font-size:13px;font-weight:600;margin-top:10px;min-height:1px}
  .settings .msg.ok{color:#0c7a37}.settings .msg.bad{color:#b42323}
  .settings .danger{border-color:#ffd5d5;background:#fffafa}
  .settings .danger h2{color:#b42323}
  .btn.danger-btn{background:#b42323;color:#fff}
  .hsep{border:0;border-top:1px solid var(--line);margin:18px 0}
  .adm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
  .adm-row:first-child{border-top:0}
  .adm-actions{display:flex;gap:6px;flex-wrap:wrap}
  .badge-r{background:#fff1f1;color:#b42323;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600;margin-left:6px}
  .tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
  .tab{background:none;border:0;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
  .tab.on{color:var(--accent);border-bottom-color:var(--accent)}
  .subtabs{display:flex;gap:6px;margin-bottom:12px}
  .subtab{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
  .subtab.on{border-color:var(--accent);color:var(--accent)}
  .pager{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}
  .pager button[disabled]{opacity:.4;cursor:default}
  .pill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600}
  .pill.ok{background:#eafff1;color:#0c7a37}.pill.no{background:#fff1f1;color:#b42323}.pill.sus{background:#fff7e6;color:#8a5a00}
  .utable{width:100%;border-collapse:collapse;font-size:13px}
  .utable th,.utable td{text-align:left;padding:8px 8px;border-top:1px solid var(--line);vertical-align:top}
  .utable th{color:var(--muted);font-weight:600;border-top:0}

  /* ---- public read-only page ---- */
  .pub-top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
  .pub-foot{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}
  .pub-foot a{color:var(--accent);font-weight:600}
  .site-footer{text-align:center;color:var(--muted);font-size:13px;padding:28px 22px 40px}
  .site-footer a{color:var(--muted);text-decoration:none}
  .site-footer a:hover{color:var(--ink)}
  #public{min-height:100vh;transition:background .25s}
  .pub-dark .brand{color:#fff}
  .pub-dark .brand .d{color:#9fa7ff}
  .pub-dark .pub-foot{color:#9aa0b3}
  .pub-dark .pub-foot a{color:#c9c9ff}
  .pub-dark .pub-top .btn{background:#fff;color:#16161d}
  .notfound{text-align:center;padding:90px 0}
  .notfound h2{font-size:28px;margin:0 0 8px}

  .pagefoot{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}