/* The Logbook Console — chrome styling. Echoes L'Opera's palette and type, but
   the live preview iframe uses the real site stylesheet, so fidelity lives there. */
:root{
  --royal-deep:#0b1533; --royal:#22376e; --royal-bright:#3a5bd0;
  --paper:#f4efe6; --paper-2:#ece4d6; --card:#fffdf9;
  --ink:#1a1c22; --ink-soft:#565a66; --line:#ded4c2;
  --ok:#2f7d52; --warn:#9a5a1e; --err:#a3341f;
  --serif:'Fraunces',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(11,21,51,.06),0 8px 30px rgba(11,21,51,.08);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}  /* class display rules (.login) outrank the UA [hidden] rule; force it */
h1,h2{font-family:var(--serif);font-weight:420;letter-spacing:-.01em;margin:0}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--royal-bright);margin:0 0 6px}
.dim{color:var(--ink-soft)}
.hint{font-family:var(--sans);font-style:normal;font-weight:400;font-size:11px;color:var(--ink-soft);letter-spacing:0;text-transform:none}

/* buttons */
.btn{font-family:var(--sans);font-weight:500;font-size:14px;border:1px solid transparent;border-radius:10px;padding:10px 18px;cursor:pointer;transition:transform .12s cubic-bezier(.2,.7,.3,1),background .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--royal-deep);color:var(--paper)}
.btn-primary:hover{background:var(--royal)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2)}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%,#12224f 0%,var(--royal-deep) 60%)}
.login-card{width:min(400px,100%);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:38px 34px}
.login-card h1{font-size:34px;margin:0 0 4px}
.login-card .sub{color:var(--ink-soft);margin:0 0 22px}
.login-card .btn{width:100%;margin-top:6px}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
input[type=text],input[type=password],input[type=date],textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;transition:border-color .15s,box-shadow .15s}
textarea{font-family:var(--serif);font-size:16px;line-height:1.6;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--royal-bright);box-shadow:0 0 0 3px rgba(58,91,208,.14)}
.slug-wrap{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.slug-wrap:focus-within{border-color:var(--royal-bright);box-shadow:0 0 0 3px rgba(58,91,208,.14)}
.slug-pre{font-family:var(--mono);font-size:13px;color:var(--ink-soft);background:var(--paper-2);padding:11px 8px 11px 12px;display:flex;align-items:center}
.slug-wrap input{border:0;border-radius:0;font-family:var(--mono);font-size:13px}
.slug-wrap input:focus{box-shadow:none}
.row{display:flex;gap:14px}
.row .grow{flex:1}
.field.date{width:170px}
.field.toggle{width:210px;justify-content:flex-start}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0}
.switch input{position:absolute;opacity:0}
.slider{width:38px;height:22px;border-radius:22px;background:var(--line);position:relative;transition:background .18s;flex:0 0 auto}
.slider::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.switch input:checked+.slider{background:var(--royal-bright)}
.switch input:checked+.slider::after{transform:translateX(16px)}
.switch em{font-style:normal;color:var(--ink-soft)}

/* topbar + layout */
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;background:var(--royal-deep);color:var(--paper)}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:.01em}
.brand .mark{color:#c9d4ff;margin-right:4px}
.brand .dim{color:rgba(233,225,212,.6)}
.top-right{display:flex;align-items:center;gap:14px}
.conn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9ec7a6;display:flex;align-items:center;gap:7px}
.conn::before{content:"";width:7px;height:7px;border-radius:50%;background:#7bd39a;box-shadow:0 0 0 3px rgba(123,211,154,.2)}
.topbar .btn-ghost{color:var(--paper);border-color:rgba(233,225,212,.28)}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.08)}

.layout{max-width:1320px;margin:0 auto;padding:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.pane{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.pane-title{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.pane-form h2.pane-title{margin-bottom:18px}
.pane-preview{position:sticky;top:86px}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.preview-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:16/12}
#preview{width:100%;height:100%;border:0;display:block}
.preview-note{font-size:12px;color:var(--ink-soft);margin:10px 2px 0}

.actions{display:flex;gap:12px;margin-top:8px}
.actions .btn{flex:1}

/* notices + result */
.notice{border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:14px}
.notice.warn{background:#fbf1e2;color:var(--warn);border:1px solid #e6cfa6}
.err{color:var(--err);font-size:13px;margin:12px 0 0}
.result{margin-top:16px;border-radius:10px;padding:14px 15px;font-size:13.5px;line-height:1.55}
.result.ok{background:#eaf5ee;border:1px solid #bfe0cb}
.result.info{background:#eef1f8;border:1px solid #cdd6ee}
.result.bad{background:#fbeae6;border:1px solid #edc4ba;color:var(--err)}
.result a{color:var(--royal-bright);font-weight:500}
.result .files{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:8px;white-space:pre-wrap}

/* existing entries */
.entries{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.entries summary{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.entries-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.entries-list li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink)}
.entries-list time{font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex:0 0 auto}

.spin{opacity:.6;pointer-events:none}

/* image controls (cover / inline / gallery) */
.dropzone{display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--line);
  border-radius:10px;padding:15px;cursor:pointer;color:var(--ink-soft);font-size:13px;background:var(--card);
  transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--royal-bright);background:var(--paper-2)}
.minibtn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--royal-bright);
  background:transparent;border:1px solid var(--line);border-radius:7px;padding:3px 9px;cursor:pointer;margin-left:auto}
.minibtn:hover{background:var(--paper-2)}
.imgrow{display:flex;gap:12px;align-items:flex-start}
.thumb{width:92px;height:69px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:0 0 auto;background:var(--paper-2)}
.imgmeta{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.imgmeta input{font-size:13px;padding:8px 10px}
.rm{flex:0 0 auto;width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);cursor:pointer;font-size:13px;line-height:1;transition:border-color .15s,color .15s}
.rm:hover{border-color:var(--err);color:var(--err)}
.thumbs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.thumbitem{display:flex;gap:12px;align-items:center}
.thumbitem .galt{flex:1;font-size:13px;padding:8px 10px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .pane-preview{position:static}
  .preview-frame{aspect-ratio:3/4}
}