/* Creaholik Studio.
 *
 * The mockups' visual language: navy navigation, white canvas, blue actions,
 * restrained cards, compact type.
 *
 * Written with logical properties throughout — inline-start, block-end,
 * margin-inline — rather than left/right/top/bottom. Arabic is on the roadmap
 * and RTL is a foundation property: retrofitting it means auditing every rule
 * in the file, while writing it this way from the first stylesheet costs
 * nothing. */

:root {
  --navy: #0F2440;
  --navy-deep: #0A1A2F;
  --blue: #1F5FA9;
  --blue-dark: #17497F;
  --ink: #16202C;
  --muted: #5B6875;
  --line: #DFE5EC;
  --canvas: #F5F7FA;
  --white: #FFF;
  --good: #2F7A55;
  --good-soft: #E6F4EC;
  --warn: #A9741A;
  --warn-soft: #FBF1DE;
  --bad: #B3261E;
  --bad-soft: #FBE9E7;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(16 32 44 / 6%), 0 4px 14px rgb(16 32 44 / 5%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }

h1 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.15; }
h2 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 10px; }

.lead { color: var(--muted); margin: 0; font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.block { display: block; }
.strong { font-weight: 600; color: var(--ink); text-decoration: none; }
.strong:hover { text-decoration: underline; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
           font-weight: 600; color: var(--muted); margin: 0 0 2px; }

/* ---------------------------------------------------------------- chrome */

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px;
  background: var(--navy); color: #fff;
}

.top .brand img { display: block; block-size: 26px; inline-size: auto; }
.top nav { display: flex; align-items: center; gap: 18px; }
.top nav a { color: #D6E1EF; text-decoration: none; font-weight: 500; }
.top nav a:hover { color: #fff; }
.top nav a.btn-primary { color: #fff; }
.who { color: #9FB3CC; font-size: 13px; }
.tag { background: rgb(255 255 255 / 14%); padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.inline { display: inline; }

button.link {
  background: none; border: 0; color: #D6E1EF; cursor: pointer;
  font: inherit; font-weight: 500; padding: 0;
}

button.link:hover { color: #fff; text-decoration: underline; }

main { max-inline-size: 1040px; margin-inline: auto; padding: 26px 28px 60px; }
.narrow { max-inline-size: 640px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding-block-end: 30px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer;
}

.btn:hover { border-color: #C4CEDA; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* ----------------------------------------------------------------- forms */

.stack { display: flex; flex-direction: column; gap: 16px; margin-block-start: 18px; }
.field { display: flex; flex-direction: column; }

label { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
legend { font-weight: 600; font-size: 14px; padding: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

.help { font-weight: 400; color: var(--muted); font-size: 13px; margin: 0; }
.req { font-weight: 400; color: var(--muted); font-size: 12px; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); color: var(--ink);
  inline-size: 100%; max-inline-size: 100%;
}

input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

textarea { resize: vertical; min-block-size: 88px; }

.choice {
  flex-direction: row; align-items: center; gap: 9px; font-weight: 400;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); cursor: pointer;
}

.choice:hover { border-color: #C4CEDA; }
.choice input { margin: 0; accent-color: var(--blue); }

.actions { display: flex; gap: 10px; align-items: center; margin-block-start: 6px; }

.alert {
  background: var(--bad-soft); border: 1px solid #F1C7C3;
  border-inline-start: 3px solid var(--bad);
  border-radius: var(--radius); padding: 12px 16px; margin-block-end: 18px;
}

.alert ul { margin: 0; padding-inline-start: 18px; }

/* -------------------------------------------------------------- enquiry */

.enquiry { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }

.steps ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.steps li { font-size: 13px; color: var(--muted); padding: 5px 0; }
.steps li a { color: var(--muted); text-decoration: none; }
.steps li a:hover { color: var(--blue); text-decoration: underline; }
.steps li.done { color: var(--good); }
.steps li.done a { color: var(--good); }
.steps li.current { color: var(--ink); font-weight: 600; }

.bar { block-size: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar span { display: block; block-size: 100%; background: var(--blue); }

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- content */

.hero { text-align: center; padding-block: 60px 40px; max-inline-size: 640px; margin-inline: auto; }
.hero h1 { font-size: 38px; }
.hero .lead { font-size: 17px; margin-block: 14px 26px; }
.hero .btn { margin-inline-end: 8px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-block-end: 20px; flex-wrap: wrap;
}

.notice {
  background: var(--good-soft); border: 1px solid #C9E4D6;
  border-inline-start: 3px solid var(--good);
  border-radius: var(--radius); padding: 16px 20px; margin-block-end: 22px;
}

.notice h2 { margin-block-end: 4px; }
.notice p { margin: 0; color: #2C4A3B; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-block-end: 20px; }

.tile {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow);
}

.tile-label { text-transform: uppercase; letter-spacing: .07em; font-size: 11px;
              font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.tile-value { margin: 0; font-size: 16px; font-weight: 600; }

.grid { inline-size: 100%; border-collapse: collapse; background: var(--white);
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.grid th { text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
           color: var(--muted); padding: 11px 16px; border-block-end: 1px solid var(--line); background: #FAFCFD; }
.grid td { padding: 13px 16px; border-block-end: 1px solid var(--line); vertical-align: top; }
.grid tr:last-child td { border-block-end: 0; }

/* Status and health always carry their words. Colour is a second signal, never
   the only one — a requirement of the specification and of anybody who cannot
   distinguish these hues. */
.pill, .health { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill { background: #EDF1F6; color: #3C4A5A; }
.pill-active { background: var(--good-soft); color: var(--good); }
.pill-under_review { background: #E9F0FA; color: var(--blue); }
.pill-client_action_required { background: var(--warn-soft); color: var(--warn); }
.pill-completed { background: var(--good-soft); color: var(--good); }
.pill-paused, .pill-cancelled, .pill-archived { background: #EDF1F6; color: #6B7787; }

.health { padding-inline-start: 0; background: none; }
.health::before { content: "●"; margin-inline-end: 6px; }
.health-on_track { color: var(--good); }
.health-attention_needed { color: var(--warn); }
.health-at_risk { color: var(--bad); }
.health-paused { color: var(--muted); }

.next { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 9px; }
.next li { color: var(--muted); }
.next strong { color: var(--ink); }

.review { margin: 0; display: flex; flex-direction: column; gap: 0; }
.review > div { display: grid; grid-template-columns: 240px 1fr; gap: 16px;
                padding-block: 11px; border-block-end: 1px solid var(--line); }
.review > div:last-child { border-block-end: 0; }
.review dt { color: var(--muted); font-size: 14px; }
.review dd { margin: 0; white-space: pre-wrap; }
.edit { font-size: 13px; margin-inline-start: 8px; }

.empty { background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius);
         padding: 44px; text-align: center; }

@media (max-width: 760px) {
  .enquiry { grid-template-columns: 1fr; }
  .steps ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .review > div { grid-template-columns: 1fr; gap: 2px; }
  main { padding-inline: 18px; }
  .top { padding-inline: 18px; }
}

/* ---------------------------------------------------- S2: updates & leads */

.two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.spaced { margin-block-start: 18px; }
.head-actions { display: flex; gap: 8px; }

select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); color: var(--ink); inline-size: 100%;
}

.files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.files li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
            background: #FAFCFD; border: 1px solid var(--line); border-radius: 8px; }
.file-name { font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-all; }
a.file-name:hover { color: var(--blue); text-decoration: underline; }

input[type="file"] {
  font: inherit; padding: 14px; border: 1px dashed var(--line);
  border-radius: 8px; background: #FAFCFD; inline-size: 100%;
}

.updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.update { padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.update:last-child { border-block-end: 0; padding-block-end: 0; }

/* An internal note must not be mistakable for something the client can read.
   The stripe is a second signal beside the label, never the only one. */
.update.internal { border-inline-start: 3px solid var(--warn); padding-inline-start: 12px; }

.update-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.update-row .pill { margin-inline-start: 4px; }
.update-actions { display: flex; gap: 14px; font-size: 13px; margin: 8px 0 0; }
.update-head h1 { margin-block-end: 4px; }

.corrected { color: var(--warn); font-weight: 600; font-size: 12px; }
.prose { white-space: pre-wrap; margin: 8px 0 0; }
.prose.small { font-size: 14px; color: var(--muted); }

.notice-inline { background: var(--warn-soft); border-radius: 8px; padding: 10px 12px;
                 margin: 0; font-size: 14px; color: #6B4A10; }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { font-size: 14px; }

/* The preview is deliberately framed: it must never be mistaken for the
   editing view, because the whole point is knowing which one you are looking
   at before you publish. */
.preview-frame { border: 2px dashed var(--blue); border-radius: 12px; padding: 14px; background: #F2F6FB; }
.preview-label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
                 font-weight: 700; color: var(--blue); margin: 0 0 10px; text-align: center; }

.leads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lead h2 { font-size: 17px; margin-block-end: 2px; }
.lead.done { opacity: .72; }
.lead-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
             margin-block-end: 10px; flex-wrap: wrap; }
.lead .bar { margin-block-end: 10px; }
.lead-form { display: flex; gap: 8px; margin-block-start: 12px; flex-wrap: wrap; }
.lead-form input { flex: 1; min-inline-size: 200px; }

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- S3: the approval */

.action-panel { border-inline-start: 3px solid var(--warn); }
.waiting { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.waiting li { display: flex; justify-content: space-between; align-items: center; gap: 16px;
              flex-wrap: wrap; padding: 12px 14px; background: var(--warn-soft); border-radius: 8px; }

.milestones { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.milestones li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                 padding-block-end: 8px; border-block-end: 1px solid var(--line); }
.milestones li:last-child { border-block-end: 0; padding-block-end: 0; }
.ms-name { font-weight: 600; flex: 1; min-inline-size: 140px; }

details { margin-block-start: 14px; }
summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--blue); padding: 6px 0; }
summary:hover { text-decoration: underline; }

input[type="date"], input[type="number"] {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); color: var(--ink); inline-size: 100%;
}

/* ------------------------------------------------------ S4: conversation */

.threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.thread-row { padding: 15px 18px; }
.thread-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.thread-subject { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 15px; }
.thread-subject:hover { color: var(--blue); text-decoration: underline; }
.thread-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.thread-row.unread { border-inline-start: 3px solid var(--blue); }
.thread-row.resolved { opacity: .7; }

/* The restricted tiers are marked in colour AND in words, because a thread
   posted at the wrong tier is the expensive mistake here. */
.tier-internal { background: var(--warn-soft); color: var(--warn); }
.tier-commercial { background: #EDE9F7; color: #4C4A9E; }

.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.message { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 14px 18px; box-shadow: var(--shadow); }
.message-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }

.count { background: var(--blue); color: #fff; border-radius: 10px; padding: 1px 7px;
         font-size: 12px; margin-inline-start: 4px; }

/* --------------------------------------------------------- S5: the library */

.files li { align-items: center; }
.file-main { flex: 1; min-inline-size: 0; }
.thumb { border-radius: 6px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.preview { max-inline-size: 100%; block-size: auto; border-radius: 8px;
           border: 1px solid var(--line); display: block; margin-block-end: 14px; }

/* ------------------------------------------------- S6: the portfolio shell */

/* A persistent rail for signed-in pages, as the mockups have it. Grid rather
   than a fixed-position aside, so the main column is never underlapped and
   the whole thing collapses to a stacked layout on a narrow screen without
   any magic numbers. */
body.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-block-size: 100vh;
}

.rail {
  background: var(--navy);
  color: #fff;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail .brand img { display: block; block-size: 24px; inline-size: auto; margin-block-end: 2px; }
.rail-label { text-transform: uppercase; letter-spacing: .09em; font-size: 10px;
              font-weight: 700; color: #7E97B5; margin: 0; }

.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a {
  color: #D6E1EF; text-decoration: none; font-weight: 500; font-size: 14px;
  padding: 9px 12px; border-radius: 8px; display: flex;
  align-items: center; justify-content: space-between; gap: 8px;
}
.rail-nav a:hover { background: rgb(255 255 255 / 8%); color: #fff; }

.rail-foot { margin-block-start: auto; border-block-start: 1px solid rgb(255 255 255 / 12%); padding-block-start: 14px; }
.rail-foot .who { margin: 0 0 6px; font-size: 13px; color: #9FB3CC; }

body.app > main { max-inline-size: 1100px; inline-size: 100%; padding: 26px 30px 60px; }

.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .07em;
                 color: var(--muted); margin: 26px 0 12px; }

/* ---- cards ---- */

.cards { list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.card { padding: 18px 20px; }
.card.needs { border-inline-start: 3px solid var(--warn); }
.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
             margin-block-end: 12px; flex-wrap: wrap; }
.card-title { font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; }
.card-title:hover { color: var(--blue); text-decoration: underline; }
.card-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.card-facts { margin: 12px 0 0; display: flex; flex-direction: column; gap: 5px; }
.card-facts > div { display: flex; gap: 10px; font-size: 13px; }
.card-facts dt { color: var(--muted); min-inline-size: 82px; }
.card-facts dd { margin: 0; }

/* ---- filters ---- */

.filters { display: flex; gap: 8px; margin-block-end: 16px; flex-wrap: wrap; }
.chip { padding: 6px 13px; border-radius: 20px; border: 1px solid var(--line);
        background: var(--white); color: var(--muted); text-decoration: none;
        font-size: 13px; font-weight: 600; }
.chip:hover { border-color: #C4CEDA; color: var(--ink); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- queue and dates ---- */

.waiting-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.waiting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Lateness is never colour alone: the word "Overdue" is in the text beside it. */
.overdue { color: var(--bad); font-weight: 600; }

.dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.dates li { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center;
            padding-block: 11px; border-block-end: 1px solid var(--line); }
.dates li:last-child { border-block-end: 0; }
.date-when { font-weight: 600; font-size: 13px; }

.tile-value.hot { color: var(--warn); }
.col-progress { min-inline-size: 120px; }
.scroll-x { overflow-x: auto; }

@media (max-width: 820px) {
  body.app { grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .rail-label { display: none; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; }
  .rail-foot { margin: 0; border: 0; padding: 0; margin-inline-start: auto; }
  body.app > main { padding-inline: 18px; }
  .cards { grid-template-columns: 1fr; }
}