/* WoodEvo Drive Portal
   Palette and type per the WoodEvo Brand Style Guidelines.
   Primary typeface SF Pro, with the guideline's own fallback chain. */

:root {
  /* Earth */
  --earth-1: #F2ECE0;
  --earth-2: #EEDFBF;
  --earth-3: #B19F8A;
  --earth-4: #665542;
  /* Green */
  --green-1: #C9C4B6;
  --green-2: #827A60;
  --green-3: #696A45;
  --green-4: #363726;
  /* Red */
  --red-1: #D9BDAA;
  --red-2: #7D3E22;
  --red-3: #582211;
  --red-4: #30140C;
  /* Neutral */
  --black: #231F20;
  --white: #FFFEFF;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(35, 31, 32, 0.06), 0 4px 12px rgba(35, 31, 32, 0.04);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--black);
  background: var(--earth-1);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red-2); }
a:hover { color: var(--red-3); }

/* ---- Masthead --------------------------------------------------------- */

.masthead {
  background: var(--green-4);
  color: var(--earth-1);
  border-bottom: 3px solid var(--green-3);
}

.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 60px;
}

/* The wordmark: "WoodEvo." — capital W, capital E, trailing period, single flat
   colour, never split or restyled per letter.
   The trailing period is part of the MARK. In running text the company is just
   "WoodEvo" - see the footer and page titles. */
.wordmark {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--earth-1);
  text-decoration: none;
  line-height: 1.1;
}
.wordmark:hover { color: var(--earth-1); }

/* The application's own name. Deliberately NOT part of the logo lockup - it is
   the name of a tool, not a brand element. A divider and the logo's clear space
   keep the two clearly separate. */
.portal-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--earth-3);
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--green-2);
  white-space: nowrap;
}

/* Clear space: the guidelines require a margin around the logo equal to the
   x-height of the logotype. At these sizes that is roughly half the logo's
   height, applied on every side and kept free of other elements. */
.brandblock {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 2px;
}

.logo {
  display: block;
  height: 26px;
  width: auto;
  margin: 13px 13px 13px 0;   /* ~x-height clear space */
}

.logo-lg {
  height: 52px;
  margin: 0 auto 0;
  max-width: 100%;
}

/* The supplied colourways are used as-is - no filters, no recolouring. */
.logo-dark-bg { /* white artwork, for the Green 4 masthead */ }

.masthead nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

.masthead nav a {
  color: var(--earth-2);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}
.masthead nav a:hover { background: rgba(242, 236, 224, 0.1); color: var(--white); }
.masthead nav a.active { background: var(--green-3); color: var(--white); }

.nav-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--red-2);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

.whoami {
  font-size: 13px;
  color: var(--earth-3);
  padding-left: 12px;
  border-left: 1px solid var(--green-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.linkbtn {
  background: none;
  border: none;
  color: var(--earth-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.linkbtn:hover { color: var(--white); }

/* ---- Layout ----------------------------------------------------------- */

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.page-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--green-4);
}

.page-intro {
  font-size: 15px;
  color: var(--earth-4);
  margin: 0 0 26px;
  max-width: 65ch;
}

h2.section {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--green-2);
  margin: 34px 0 12px;
}

.card {
  background: var(--white);
  border: 1px solid var(--green-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.folder-card { display: block; text-decoration: none; color: inherit; }
.folder-card:hover { border-color: var(--green-3); color: inherit; }
.folder-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--green-4);
}
.folder-card p { margin: 0 0 12px; font-size: 14px; color: var(--earth-4); }

.muted { color: var(--earth-4); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---- Tables ----------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--green-1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green-2);
  background: var(--earth-1);
  padding: 10px 14px;
  border-bottom: 1px solid var(--green-1);
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--earth-1);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FBF8F2; }

.filename { font-weight: 500; color: var(--green-4); }

/* ---- Badges ----------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-pending   { background: var(--earth-2); color: var(--earth-4); }
.badge-approved  { background: var(--green-1); color: var(--green-4); }
.badge-declined  { background: var(--red-1);   color: var(--red-3); }
.badge-cancelled { background: var(--earth-1); color: var(--earth-4); border: 1px solid var(--earth-3); }
.badge-failed    { background: var(--red-2);   color: var(--white); }
.badge-kind      { background: var(--green-1); color: var(--green-4); }
.badge-self      { background: var(--red-1);   color: var(--red-3); }

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary  { background: var(--green-3); color: var(--white); }
.btn-primary:hover { color: var(--white); }
.btn-secondary { background: var(--white); color: var(--green-4); border-color: var(--green-1); }
.btn-secondary:hover { border-color: var(--green-3); color: var(--green-4); filter: none; }
.btn-danger   { background: var(--red-2); color: var(--white); }
.btn-danger:hover { color: var(--white); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Forms ------------------------------------------------------------ */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-4);
  margin-bottom: 5px;
}

.field { margin-bottom: 18px; }

.hint {
  font-size: 12.5px;
  color: var(--earth-4);
  margin: 5px 0 0;
}

input[type="text"], input[type="file"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--earth-3);
  border-radius: var(--radius);
}
input[type="text"]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--green-3);
  outline-offset: -1px;
  border-color: var(--green-3);
}
textarea { min-height: 78px; resize: vertical; }

/* ---- Notices ---------------------------------------------------------- */

.notice {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border-left: 4px solid;
  font-size: 14px;
}
.notice-info    { background: var(--earth-2); border-color: var(--earth-4); color: var(--earth-4); }
.notice-good    { background: var(--green-1); border-color: var(--green-3); color: var(--green-4); }
.notice-bad     { background: var(--red-1);   border-color: var(--red-2);  color: var(--red-3); }
.notice strong { font-weight: 600; }

.banner-mock {
  background: var(--red-2);
  color: var(--white);
  text-align: center;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 500;
}

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--earth-4);
  background: var(--white);
  border: 1px dashed var(--earth-3);
  border-radius: var(--radius);
}
.empty p { margin: 0 0 4px; }

/* ---- Request detail --------------------------------------------------- */

dl.detail { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 9px 18px; }
dl.detail dt { font-size: 13px; font-weight: 600; color: var(--green-2); }
dl.detail dd { margin: 0; font-size: 14px; }

pre.preview {
  background: var(--earth-1);
  border: 1px solid var(--green-1);
  border-radius: var(--radius);
  padding: 14px;
  max-height: 420px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.trail { list-style: none; margin: 0; padding: 0; }
.trail li {
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--green-1);
  font-size: 13px;
  color: var(--earth-4);
}
.trail li strong { color: var(--green-4); font-weight: 600; }

.decision-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Welcome ---------------------------------------------------------- */

.welcome {
  max-width: 470px;
  margin: 76px auto;
  text-align: center;
}
.welcome .wordmark-lg {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--green-4);
  line-height: 1.05;
}
.welcome .tagline {
  /* The tagline is supplied as "Wood. Evolved." - set as written. Forcing it to
     uppercase would be restyling a brand element, which the guidelines forbid. */
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--earth-4);
  margin-top: 10px;
}
.welcome h1 {
  font-size: 22px;
  font-weight: 400;
  color: var(--green-4);
  margin: 34px 0 10px;
}
.welcome p { color: var(--earth-4); margin: 0 0 26px; }

footer.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 40px;
  font-size: 12px;
  color: var(--earth-3);
}

@media (max-width: 720px) {
  .masthead-inner { gap: 12px; }
  .masthead nav { width: 100%; margin-left: 0; }
  .whoami { border-left: none; padding-left: 0; }
  dl.detail { grid-template-columns: 1fr; gap: 3px 0; }
  dl.detail dd { margin-bottom: 10px; }
  .decision-pair { grid-template-columns: 1fr; }
  .page-title { font-size: 25px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--green-1); padding: 6px 0; }
  td { border: none; padding: 5px 14px; }
}

/* Checkbox rows: the generic label rule is block-level, which would stack a
   checkbox above its own text. */
label.small {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
label.small input[type="checkbox"] {
  margin: 3px 0 0;
  width: auto;
  flex: none;
  accent-color: var(--green-3);
}
.field p.small { margin: 0; }

/* ---- File browser ------------------------------------------------------ */

.crumbs {
  font-size: 13.5px;
  color: var(--earth-4);
  margin-bottom: 14px;
  line-height: 1.9;
}
.crumbs a { color: var(--earth-4); text-decoration: none; }
.crumbs a:hover { color: var(--red-2); text-decoration: underline; }
.crumb-sep { color: var(--earth-3); margin: 0 6px; }
.crumb-here { color: var(--green-4); font-weight: 600; }

.files-head { align-items: baseline; margin-bottom: 18px; }
.files-head .page-title { margin-bottom: 0; }
.file-title { font-size: 24px; word-break: break-word; }

.searchbox { display: flex; gap: 8px; align-items: center; }
.searchbox input[type="text"] { width: 240px; padding: 7px 11px; font-size: 14px; }
.searchbox.wide input[type="text"] { width: 100%; }

table.filetable td { vertical-align: middle; }
table.filetable tr.is-folder .itemname { font-weight: 600; }
.col-icon { width: 34px; padding-right: 0 !important; }

.itemname { color: var(--green-4); text-decoration: none; font-weight: 500; }
.itemname:hover { color: var(--red-2); text-decoration: underline; }

/* Icons drawn in CSS - no image requests, and they inherit the palette. */
.ico { display: inline-block; width: 18px; height: 16px; position: relative; }
.ico-folder::before {
  content: ""; position: absolute; inset: 1px 0 0 0;
  background: var(--earth-3); border-radius: 2px 3px 3px 3px;
}
.ico-folder::after {
  content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 4px;
  background: var(--earth-3); border-radius: 2px 2px 0 0;
}
.ico-file::before {
  content: ""; position: absolute; inset: 0 3px 0 2px;
  background: var(--green-1); border: 1px solid var(--earth-3);
  border-radius: 2px;
}
.ico-locked::before, .ico-locked::after { background: var(--red-2); }

.badge-locked   { background: var(--red-2);  color: var(--white); }
.badge-external { background: var(--earth-2); color: var(--red-3); border: 1px solid var(--red-1); }

/* ---- File detail ------------------------------------------------------- */

.filegrid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}

.preview-frame {
  background: var(--white);
  border: 1px solid var(--green-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-frame img { max-width: 100%; max-height: 640px; display: block; }
.preview-frame iframe { width: 100%; height: 640px; border: none; display: block; }

.preview-none {
  background: var(--white);
  border: 1px dashed var(--earth-3);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
  color: var(--earth-4);
}
.preview-none p { margin: 6px 0 0; }

.ico-file-lg, .ico-locked-lg {
  display: inline-block; width: 40px; height: 48px;
  background: var(--green-1); border: 2px solid var(--earth-3);
  border-radius: 4px; margin-bottom: 10px;
}
.ico-locked-lg { background: var(--red-1); border-color: var(--red-2); }

.filemeta { background: var(--white); border: 1px solid var(--green-1);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.filemeta h2.section { margin-top: 0; }
.filemeta dl.detail { grid-template-columns: 90px 1fr; gap: 7px 12px; }

@media (max-width: 860px) {
  .filegrid { grid-template-columns: 1fr; }
  .preview-frame iframe { height: 420px; }
  .searchbox input[type="text"] { width: 150px; }
}

/* Inline form inside a notice list, so a button can sit beside its label. */
.inline-form { display: inline; margin-left: 8px; }
.inline-form button { vertical-align: baseline; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }
.notice li { margin-bottom: 6px; }

/* "Shared with anyone who has the link" - deliberately loud, because it is the
   thing that quietly defeats a gate. */
.badge-public { background: var(--red-3); color: var(--white); }

/* ---- Audit timeline ---------------------------------------------------- */

.daymark {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-2);
  margin: 30px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--green-1);
}

ul.timeline { list-style: none; margin: 0; padding: 0; }

.tl {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 14px 11px 12px;
  background: var(--white);
  border: 1px solid var(--green-1);
  border-left: 3px solid var(--green-1);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.tl-time {
  flex: none;
  width: 62px;
  font-size: 12.5px;
  color: var(--earth-3);
  font-variant-numeric: tabular-nums;
}

.tl-body { flex: 1; min-width: 0; }
.tl-text { display: block; font-size: 14.5px; color: var(--black); line-height: 1.45; }
.tl-sub  { display: block; font-size: 13px; color: var(--earth-4); margin-top: 2px; }

.tl-tech {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dotted var(--green-1);
  font-size: 11.5px;
  color: var(--earth-3);
  word-break: break-word;
}

.tl-link {
  flex: none;
  font-size: 12.5px;
  color: var(--red-2);
  text-decoration: none;
}
.tl-link:hover { text-decoration: underline; }

/* Tone: how much attention the line deserves. Deliberately restrained -
   colouring everything would make nothing stand out. */
.tl-routine  { border-left-color: var(--green-1); }
.tl-decision { border-left-color: var(--green-3); }
.tl-watch    { border-left-color: var(--earth-3); background: #FDFBF6; }
.tl-problem  { border-left-color: var(--red-2); background: #FCF6F3; }

@media (max-width: 620px) {
  .tl { flex-wrap: wrap; gap: 4px 12px; }
  .tl-time { width: auto; }
  .tl-body { flex-basis: 100%; }
}

/* The file's real location in Drive, shown on the approval screen so an
   approver can go and find it there. Monospace because it is a path, and
   breakable because some of these are long. */
.drivepath {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--green-4);
  background: var(--earth-1);
  border: 1px solid var(--green-1);
  border-radius: 4px;
  padding: 3px 7px;
  display: inline-block;
  word-break: break-word;
  line-height: 1.6;
}