/* Kabar Kucing: one section inside the Kucing Kita page, plus the form and the moderation screen.
   Follows the page's own system: white 16px cards, soft shadow, Causten, 420px column. */
.opk,.opk-compose,.opk-admin,.opk-dialog{
  --opk-blue:#2060D0;--opk-blue-press:#1A50B0;--opk-ink:#101828;--opk-body:#344054;--opk-muted:#475467;--opk-hint:#667085;
  --opk-line:#EAECF0;--opk-field:#8A94A6;--opk-soft:#F2F6FD;--opk-error:#B42318;--opk-error-bg:#FEF3F2;--opk-ok:#067647;
  --opk-ease:cubic-bezier(.23,1,.32,1)}
.opk{background:#fff;border-radius:16px;padding:16px 16px 18px;margin-bottom:12px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.opk-title{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--opk-muted)}
.opk-sub{margin:6px 0 14px;font-size:14px;line-height:1.5;color:var(--opk-muted)}
.opk-muted{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--opk-muted)}
.opk-hint{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--opk-hint)}

/* tabs (signed in only) */
.opk-tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:1px solid var(--opk-line)}
.opk-tabs [role=tab]{flex:1;min-height:44px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;
  font:inherit;font-size:14px;font-weight:700;color:var(--opk-hint);cursor:pointer;padding:0 8px}
.opk-tabs [role=tab][aria-selected=true]{color:var(--opk-blue);border-bottom-color:var(--opk-blue)}
.opk-tabs [role=tab]:focus-visible{outline:2px solid var(--opk-blue);outline-offset:-2px;border-radius:8px 8px 0 0}

/* feed */
.opk-feed{display:flex;flex-direction:column}
.opk-entry{padding:14px 0;border-top:1px solid var(--opk-line)}
.opk-entry:first-child{border-top:0;padding-top:2px}
.opk-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--opk-soft)}
.opk-entry-body{padding-top:10px}
.opk-by{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--opk-ink)}
.opk-by b{font-weight:800}
.opk-pill{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:#FDF5DF;color:#7A5B12;font-size:12px;font-weight:700}
.opk-entry.is-caretaker .opk-photo{outline:2px solid #F0E3BE;outline-offset:-2px}
.opk-date{margin:2px 0 0;font-size:13px;color:var(--opk-muted);font-variant-numeric:tabular-nums}
.opk-story{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--opk-body);white-space:pre-line;overflow-wrap:anywhere}
.opk-state{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:#F2F4F7;color:var(--opk-body)}
.opk-state.pending{background:#FEF0C7;color:#93370D}
.opk-state.published{background:#DCFAE6;color:var(--opk-ok)}
.opk-state.rejected{background:var(--opk-error-bg);color:var(--opk-error)}
.opk-reason{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--opk-error-bg);color:var(--opk-error);font-size:14px;line-height:1.5}
.opk-photo-missing{margin:0;padding:22px 12px;border-radius:12px;background:var(--opk-soft);color:var(--opk-muted);font-size:14px;text-align:center}
.opk-empty p{margin:0 0 14px;padding:16px;border-radius:12px;background:var(--opk-soft);font-size:15px;line-height:1.55;color:var(--opk-body)}
.opk-entry-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.opk-entry-actions>*{flex:1 1 auto}

/* buttons */
.opk-primary,.opk-secondary,.opk-danger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;box-sizing:border-box;
  padding:13px 16px;border-radius:12px;border:0;font:inherit;font-size:15px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.opk-primary{background:var(--opk-blue);color:#fff}
.opk-secondary{background:#fff;color:var(--opk-blue);border:1.5px solid var(--opk-blue)}
.opk-danger{background:#fff;color:var(--opk-error);border:1.5px solid var(--opk-error)}
.opk-primary[disabled],.opk-secondary[disabled],.opk-danger[disabled]{background:#E4E7EC;color:#475467;border-color:#E4E7EC;cursor:default}
.opk #open-compose,.opk #timeline-more,.opk #mine-more{margin-top:14px}
.opk-text{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;font:inherit;font-size:15px;font-weight:700;color:var(--opk-blue);cursor:pointer;text-decoration:none}
.opk-primary:focus-visible,.opk-secondary:focus-visible,.opk-danger:focus-visible,.opk-text:focus-visible,.opk-back:focus-visible{outline:3px solid #9DB8EC;outline-offset:2px}
@media (hover:hover){
  .opk-primary:not([disabled]):hover{background:var(--opk-blue-press)}
  .opk-secondary:not([disabled]):hover{background:var(--opk-soft)}
  .opk-danger:not([disabled]):hover{background:var(--opk-error-bg)}
  .opk-text:hover{text-decoration:underline}
}
@media (prefers-reduced-motion:no-preference){
  .opk-primary,.opk-secondary,.opk-danger{transition:transform 160ms var(--opk-ease),background-color 160ms ease}
  .opk-primary:not([disabled]):active,.opk-secondary:not([disabled]):active,.opk-danger:not([disabled]):active{transform:scale(.97)}
}

/* notices */
.opk-notice{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--opk-soft);color:var(--opk-ink);font-size:14px;line-height:1.5}
.opk-notice.error{background:var(--opk-error-bg);color:var(--opk-error)}
.opk-notice .opk-text,.opk-notice .opk-secondary{margin-top:6px}
.opk-gate{margin:0 0 16px;padding:14px;border-radius:12px;background:#FDF5DF;color:#5C4510;font-size:15px;line-height:1.5}
.opk-gate p{margin:0 0 12px}

/* form */
.opk-compose{padding:4px 0 32px}
.opk-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 6px -6px;padding:0 6px;background:none;border:0;font:inherit;font-size:15px;font-weight:700;color:var(--opk-blue);cursor:pointer;border-radius:8px}
.opk-compose h1{margin:4px 0 6px;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--opk-ink);outline:none}
.opk-compose form{background:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06)}
.opk-field{margin-bottom:18px}
.opk-label{display:block;margin:0 0 6px;font-size:14px;font-weight:700;color:var(--opk-ink)}
.opk-compose input:not([type=checkbox]):not([type=file]),.opk-compose textarea,.opk-compose select,.opk-admin select,.opk-admin textarea{
  display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1.5px solid var(--opk-field);border-radius:12px;
  background:#fff;color:var(--opk-ink);font:inherit;font-size:16px;line-height:1.4}
.opk-compose textarea,.opk-admin textarea{min-height:120px;resize:vertical}
.opk-compose input:focus,.opk-compose textarea:focus,.opk-compose select:focus,.opk-admin textarea:focus{outline:none;border-color:var(--opk-blue);box-shadow:0 0 0 3px rgba(32,96,208,.18)}
.opk-field.has-error input,.opk-field.has-error textarea,.opk-field.has-error .opk-picker{border-color:var(--opk-error)}
.opk-error{margin:6px 0 0;font-size:14px;line-height:1.45;font-weight:600;color:var(--opk-error)}
.opk-count{margin:6px 0 0;text-align:right;font-size:12px;color:var(--opk-hint);font-variant-numeric:tabular-nums}
.opk-picker{position:relative;border:1.5px dashed var(--opk-field);border-radius:14px;padding:14px;background:#fff}
.opk-picker:focus-within{border-color:var(--opk-blue);box-shadow:0 0 0 3px rgba(32,96,208,.18)}
.opk-picker.has-photo{border-style:solid;padding:8px}
.opk-picker img{display:block;width:100%;max-height:320px;object-fit:contain;border-radius:10px;background:var(--opk-soft)}
.opk-pick{width:100%}
.opk-picker-actions{display:flex;justify-content:space-between;gap:12px;padding:4px 6px 0}
.opk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.opk-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--opk-body);cursor:pointer}
.opk-consent input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--opk-blue)}
.opk-compose #form-status{margin-top:14px}
.opk-compose #submit{margin-top:14px}
.opk-before-submit{margin-top:14px}
.opk-clear{display:flex;margin:6px auto 0}
.opk-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:opk-spin .8s linear infinite}

/* page swap: the form replaces the cat page until Back */
body.opk-composing main>:not(#compose-panel){display:none!important}

/* dialogs */
.opk-dialog{width:min(92vw,400px);box-sizing:border-box;border:0;border-radius:16px;padding:20px;color:var(--opk-ink);box-shadow:0 20px 50px rgba(16,24,40,.25)}
.opk-dialog::backdrop{background:rgba(16,24,40,.45)}
.opk-dialog h2{margin:0 0 8px;font-size:19px;line-height:1.3}
.opk-dialog p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--opk-body)}
.opk-actions{display:flex;flex-direction:column;gap:8px}

/* moderation (wp-admin) */
.opk-admin{max-width:720px}
.opk-admin h1{font-size:23px;font-weight:800}
.opk-admin select{max-width:320px;margin-bottom:16px}
.opk-queue .opk-entry{background:#fff;border:1px solid var(--opk-line);border-radius:16px;padding:14px;margin-bottom:14px}
.opk-queue .opk-photo{aspect-ratio:auto;max-height:420px;object-fit:contain}
.opk-who{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#F9FAFB;font-size:14px;line-height:1.5;color:var(--opk-body)}
.opk-who b{color:var(--opk-ink)}
.opk-who .bad{color:var(--opk-error);font-weight:700}
.opk-queue .opk-consent{margin-top:12px}
.opk-queue textarea{margin-top:10px;min-height:72px}

/* motion: only where something changes; off for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .opk-compose:not([hidden]){animation:opk-in 220ms var(--opk-ease) both}
  .opk-notice:not([hidden]),.opk-error:not([hidden]),.opk-gate{animation:opk-fade 180ms var(--opk-ease) both}
  .opk-photo,.opk-picker img{transition:opacity 200ms ease}
  .opk-photo.is-loading,.opk-picker img.is-loading{opacity:0}
  .opk-tabs [role=tab]{transition:color 150ms ease,border-color 150ms ease}
}
@keyframes opk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes opk-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes opk-spin{to{transform:rotate(360deg)}}

/* the page's base styles set display on buttons, labels and images; [hidden] must still win */
.opk [hidden],.opk-compose [hidden],.opk-admin [hidden],.opk-dialog [hidden],#compose-panel[hidden],#opk-app[hidden]{display:none!important}
/* the page styles every input and label; reset the checkbox and its text */
.opk-compose .opk-consent input[type=checkbox],.opk-queue .opk-consent input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:22px;height:22px;min-height:0;min-width:0;padding:0;border:0;border-radius:4px;box-shadow:none;background:none}
.opk-consent span{font-weight:400}
.opk-compose .opk-field.has-error input:not([type=checkbox]):not([type=file]),.opk-compose .opk-field.has-error textarea{border-color:var(--opk-error)}

/* four-skill pass, round 1 blockers */
.opk-dialog{margin:auto;inset:0;max-height:calc(100dvh - 32px)}
.opk-dialog[open]{position:fixed;height:fit-content}
.opk-compose input:not([type=checkbox]):not([type=file]),.opk-compose textarea,.opk-compose select,.opk-admin textarea,.opk-admin select{text-transform:none;letter-spacing:normal}
.opk-compose ::placeholder,.opk-admin ::placeholder{color:#667085;opacity:1;text-transform:none;letter-spacing:normal}
.opk-title{font-size:12px;letter-spacing:.1em}
.opk-entry-actions{flex-wrap:nowrap}
.opk-entry-actions>*{flex:1 1 0;min-width:0}
.opk-queue .opk-entry-actions{flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.opk-dialog[open]{animation:opk-fade 180ms var(--opk-ease) both}}

/* 0.2.3: the share button sits in #174's story card, under the location note, as the outline twin of .op-cta
   (same font, height and radius; the ring is an inset shadow so both buttons measure the same) */
.op-combox .opk-cta-outline{margin-top:16px;background:#fff;color:#2a6ad4;box-shadow:inset 0 0 0 1.5px #2a6ad4;-webkit-tap-highlight-color:transparent}
.op-combox .opk-cta-outline:focus-visible{outline:3px solid #9DB8EC;outline-offset:2px}
@media (hover:hover){.op-combox .opk-cta-outline:hover{background:#F2F6FD}}